无法在角度材料表中显示特定列数据答案

【问题标题】：Not able to show particular column data in angular material table无法在角度材料表中显示特定列数据
【发布时间】：2020-10-23 10:01:10
【问题描述】：

我一直试图在材料表中显示我的 JSON 数据，但我的列“用户名”之一没有显示表中的任何数据。任何人都可以分享我如何显示用户名数据的代码表。我是 Angular 新手，所以我不知道如何遍历 JSON。

这是我来自 api 的 json。

[
       {
          "studentId": 1,
          "clientId": 1,
          "regNo": "s101",
          "firstName": "shrey",
          "middleName": "prakash",
          "lastName": "soni",
          "gender": "m",
          "birthDate": "2000-12-05",
          "aboutMe": "Tech enthusia",
          "profileSummary": "android developer",
          "user": {
             "userId": 1,
             "userType": 1,
             "userName": "shreysoni",
             "activeState": 0
          }
       },
       {
          "studentId": 2,
          "clientId": 1,
          "regNo": "s102",
          "firstName": "jay",
          "middleName": "prakash",
          "lastName": "soni",
          "gender": "m",
          "birthDate": "2000-12-01",
          "aboutMe": "Cook",
          "profileSummary": "Web dev",
          "user": null
       },
       {
          "studentId": 3,
          "clientId": 1,
          "regNo": "s103",
          "firstName": "harsh",
          "middleName": "prakash",
          "lastName": "gurnani",
          "gender": "m",
          "birthDate": "2000-01-18",
          "aboutMe": "Architect",
          "profileSummary": "Construction",
          "user": {
             "userId": 2,
             "userType": 1,
             "userName": "harshgurnani",
             "activeState": 1
          }
       },
       {
          "studentId": 6,
          "clientId": 1,
          "regNo": "s104",
          "firstName": "Dennison",
          "middleName": "Hulke",
          "lastName": "Malyon",
          "gender": "M",
          "birthDate": "2019-12-22",
          "aboutMe": "Nam nulla. Integer pede justo, lacinia eget",
          "profileSummary": "Nam nulla",
          "user": null
       }
    ]

这里是显示列数组列表：

displayedColumns: string[] = ['select', 'registerNumber', 'firstName', 'middleName', 'lastName', 'userName', 'isActive'];

这里是用户名列def

<!-- UserName Column -->
      <ng-container matColumnDef="userName">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> User Name </th>
        <td mat-cell *matCellDef="let element" data-title="User Name:"> {{element.userName} </td>
      </ng-container>

【问题讨论】：

标签： json angular

【解决方案1】：

你错过了 json 的 user 节点

如果user 为空，您可以使用如下的空传播来处理它

<ng-container matColumnDef="userName">
  <th mat-header-cell *matHeaderCellDef mat-sort-header> User Name </th>
  <td mat-cell *matCellDef="let element" data-title="User Name:"> {{element.user?.userName}} </td>
</ng-container>

【讨论】：

你能告诉我什么是空传播吗？这意味着
这意味着如果 user 为 null，则表达式不会在 ? element.user?.userName 成为 UI 空字符串（而不是引发异常）之后执行任何操作，并且如果 user 具有定义的值，则使用用户名
我也想问你我有切换按钮我想要如果用户名退出然后我想在 UI 上显示它否则我不想要我如何实现它
您可以在按钮标签中使用*ngIf="element.user?.userName"，它应该可以工作（不要忘记将答案标记为已回答我喜欢我的绿色勾号）
被激活这是我的代码

【解决方案2】：

 <ng-container matColumnDef="userName">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> User Name </th>
        <td mat-cell *matCellDef="let element" data-title="User Name:"> {{element.user.userName}} </td>
      </ng-container>

【讨论】：

粘贴代码后，在用户名列中获取“{{element.user.username}}”作为输出
我可以看到你没有把 } 放在最后。现在数据即将到来，但新问题是我在某些用户中有一个 null 所以应用程序抛出错误