将键和值映射到字符串数组答案

【问题标题】：Map key and value to an array of strings将键和值映射到字符串数组
【发布时间】：2021-01-25 21:42:21
【问题描述】：

在我的 Angular 应用程序中，我使用了一个表，我必须将行值（一个字符串数组）映射到一个键值对。请指导我。

HTML

<table  mat-table [dataSource]="dataSource">
    <ng-container matColumnDef="data">
        <th mat-header-cell *matHeaderCellDef class="bottom-primary-color"> Data </th>
        <td mat-cell *matCellDef="let row" width="150px" > {{displayData[row.data]}} </td>
    </ng-container>
</table>

get displayData(): Record<string, string> {
    return {
        test1: 'testtest1',
        test2: 'testtest2',
        test3: 'testtest3',
    };
}

我想实现这个。

data = [test1, test2, test3];

我想将数组data 与displayData 对象映射并显示 testtest1, testtest2, testtest3 而不是 test1,test2,test3 对于我的用户。

我只能为数组中的第一个元素映射键值对。如何为数组的所有元素映射键值对？

【问题讨论】：

标签： javascript html arrays

【解决方案1】：

正如我在another post 中提到的，您可以使用 ngFor 语句来迭代对象的键，如下所示：

<tr *ngFor="let key of Object.keys(your_json_object)">
    <td>{{your_json_object[key]}}</td>
    ...
</tr>

通过这种方法，您可以使用 displayData() 来填充数据源，然后获取键列表。在这里，您可以使用 your_json_object[key] 访问您的数据，这将返回带有键名的值。

编辑：再次阅读您的帖子并注意到您想使用数据数组来定义值的顺序。由于您设法为第一个值执行此操作，因此缺少的也应该是 ngFor 。尝试将其添加到您的容器中应该可以解决该问题。

【讨论】：