如何使用ngfor显示子对象的信息

Question

我正在使用 angular 开发应用程序，我需要显示一些具有以下结构的数据：

{
    "id": 33,
    "arg": 7,
    "date": "2022-01-31",
    "User": {
        "Name": "Cristian",
        "Group": {
            "NGroup": "Group 1"
        }
    },
    "Sport": {
        "NSport": "Sport 1"
    }
},

应该这样显示信息

编号 |参数 |日期 |姓名（用户） | NGroup（集团）| NSport（运动）

为此我尝试使用键值，问题是当它带来用户对象时，它向我显示了一个名为 [object Object] 的“项目”，它对应于组并且无法隐藏它。这是当前代码：

                 <tbody>
                    <tr *ngFor="let item of listItems">
                      <td><div>{{ item.id }}</div></td>                               
                      <td><div>{{ item.arg}}</div></td>
                      <td><div>{{ item.date }}</div></td>
                      <td *ngFor="let key of item.User | keyvalue "><div>{{ key.value }}</div></td>
                      <td *ngFor="let key of item.User | keyvalue"><div *ngFor="let key2 of key.value | keyvalue" >{{ key2.value }}</div></td>                         
                      <td *ngFor="let kv of item.Sports | keyvalue"><div>{{kv.value}}</div></td>                         
                   
                    </tr>  
                  </tbody>

这个输出是：

编号 |参数 |日期 | [对象，对象] |姓名（用户） | NGroup（集团）| NSport(运动)

问题是：我怎样才能只显示对象的某些项目而不是所有内容

谢谢！！

Answer 1

这可能是在回避问题，但通常我会尽量使组件模板文件保持简单。它有助于将业务逻辑包含在您的 TS 文件中，这还可以实现更好的测试场景。

this.viewItems = this.listItems.map(item=>{
  const { id, arg, date, User, Sport } = item;
  const name = User.Name;
  const nGroup = User.Group.NGroup;
  const nSport = Sport.NSport;
  return { id, arg, date, name, nGroup, nSport };
});

现在您只需要一个 *ngFor 循环来渲染您的数据。

<tbody>
  <tr *ngFor="let item of viewItems">
    <td><div>{{ item.id }}</div></td>
    <td><div>{{ item.arg}}</div></td>
    <td><div>{{ item.date }}</div></td>
    <td><div>{{ key.name }}</div></td>
    <td><div>{{ key.nGroup }}</div></td>
    <td><div>{{ key.nSport }}</div></td>
  </tr>
</tbody>

注意：虽然它已在您的源数据中定义，但我会避免使用大写字母（User 和 Sport）命名对象。这种命名风格应该保留用于定义类.

Answer 2

您可以使用如下方式筛选出要显示的项目：

<table>
 <tr *ngFor="let item of listItems">
 <td><div>{{ item.id }}</div></td>                               
 <td><div>{{ item.arg}}</div></td>
 <td><div>{{ item.date }}</div></td>
 <ng-container *ngFor="let key of item.User | keyvalue ">
  <td *ngIf="isInteresting(key.value)">{{ key.value }}</td>
 </ng-container>

 <td *ngFor="let key of item.User | keyvalue"><div *ngFor="let key2 of 
key.value | keyvalue" >{{ key2.value }}</div></td>                         
 <td *ngFor="let kv of item.Sport | keyvalue"><div>{{kv.value}}</div></td>                         

</tr>  
</table>

在组件中：

isInteresting(val): boolean { return typeof val !== 'object'; }

如何使用ngfor显示子对象的信息

How to display the information of a subobject using ngfor

json

angular

ngfor