Невозможно отобразить данные определенного столбца в таблице угловых материалов

Я пытался показать свои данные JSON в таблице материалов, но один из моих столбцов «имя пользователя» не показывает никаких данных в таблице. Может ли кто-нибудь поделиться кодом того, как я могу отображать данные userName в таблице. Я Я новичок в angular, поэтому не знаю, как пройти через JSON.

Вот мой json из api.

[
       {
          "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
       }
    ]

Вот список массивов displaycolumn:

displayColumns: string [] = ['выберите', 'registerNumber', 'firstName', 'middleName', 'lastName', 'userName', 'isActive'];

Вот определение столбца имени пользователя

<!-- 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
person Shrey Soni    schedule 23.10.2020    source источник

Ответы (2)


arrow_upward
1
arrow_downward

вы пропустили user узел своего json

и если user имеет значение null, вы можете обработать его с помощью нулевого распространения, как показано ниже

<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>
person The Fabio    schedule 23.10.2020
comment
Можете ли вы сказать мне, что я имею в виду под «нулевым размножением»? это означает - person Shrey Soni; 23.10.2020
comment
это означает, что если пользователь имеет значение null, выражение не выполняет ничего после того, как ? element.user? .userName становится пустой строкой пользовательского интерфейса (вместо того, чтобы вызывать исключения), и если пользователь имеет определенное значение, тогда используется имя пользователя - person The Fabio; 23.10.2020
comment
Я также хочу спросить, у меня есть кнопка переключения, которую я хочу, если имя пользователя выходит, тогда я хочу показать его в пользовательском интерфейсе, иначе я не хочу, как я могу его реализовать - person Shrey Soni; 23.10.2020
comment
вы можете использовать *ngIf="element.user?.userName" в теге кнопки, он должен работать (не забудьте отметить ответ как ответ, мне нравятся мои зеленые галочки) - person The Fabio; 23.10.2020
comment
‹Ng-container matColumnDef = isActive› ‹th mat-header-cell * matHeaderCellDef› Активировано ‹/th› ‹td mat-cell * matCellDef = let element * ngIf = element.user? .UserName data-title = Имя пользователя: ›‹Mat-slide-toggle› ‹/mat-slide-toggle› ‹/td› ‹/ng-container› это мой код - person Shrey Soni; 23.10.2020
comment
вместо этого поместите ngif в тег mat-slide-toggle (у нас не может быть тега ngif и a td с matCellDef, иначе это будет ошибкой - person The Fabio; 23.10.2020
comment
Спасибо чувак . Вы очень помогли мне. Я могу порекомендовать мне несколько туториалов по Angular, потому что я мобильный разработчик. - person Shrey Soni; 23.10.2020
comment
np, я всегда советую пройти туториал по героям с angular.io - person The Fabio; 23.10.2020

arrow_upward

arrow_downward

person    schedule
comment
после вставки кода, в столбце имени пользователя получим '{{element.user.username}}' в качестве вывода - person Shrey Soni; 23.10.2020
comment
Я вижу, что вы не поставили} в конце. Сейчас идут данные, но новая проблема в том, что у меня есть ноль у некоторых пользователей, поэтому приложение выдает ошибку - person Shrey Soni; 23.10.2020