Попытка использовать asyn c pipe с ngFor для извлечения данных и динамического отображения angular 6 - PullRequest
Новая
       23

Попытка использовать asyn c pipe с ngFor для извлечения данных и динамического отображения angular 6

0 голосов
/ 26 марта 2020

В приложении angular 6 я использую поле выбора "ng-select" https://github.com/ng-select/ng-select#getting -started и запускаю событие "change", чтобы извлечь данные из метода API и назначить их наблюдаемый, затем использующий канал asyn c в моем html для прослушивания свойства массива этого наблюдаемого и отображения его в таблице, хотя я получаю данные из таблицы, но в какой-то момент выдает ошибку поскольку свойство оценивается как «ноль», 

AgentBranchAssignmentComponent.html:72 ERROR TypeError: Cannot read property 'users' of null
    at Object.eval [as updateDirectives] (AgentBranchAssignmentComponent.html:72)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:11054)
    at checkAndUpdateView (core.js:10451)
    at callViewAction (core.js:10692)
    at execEmbeddedViewsAction (core.js:10655)
    at checkAndUpdateView (core.js:10452)
    at callViewAction (core.js:10692)
    at execComponentViewsAction (core.js:10634)
    at checkAndUpdateView (core.js:10457)
    at callViewAction (core.js:10692)

, поэтому, пожалуйста, сообщите: 1) почему возникает эта ошибка и как ее избежать? 2) это лучшее решение для такого сценария? 3) как очистить таблицу, если я очищаю выбор?

это таблица с конфигурацией ngFor "ng-select" в html: 

<ng-select
 (change)="getAgentsForBranch($event)"
 [items]="branches">
</ng-select> 

<tbody *ngIf="userPage && (userPage | async).users">
 <tr *ngFor="let u of (userPage | async).users">
 <td>{{u.firstName + " " + u.lastName}}</td>
 <td>{{branchName}}</td>
 </tr>
</tbody>

и вот тс: 

userPage: Observable<AllUserListPage>;

getAgentsForBranch(event) {
    if(!event){
     // here i am clearing the selction and want to clear data in the table also
      this.branchName= '';
      return;
    }
    const branchId = event.branchId;
    this.branchName = event.name;
    this.userPage = this.obexService.getUsersForBranch(branchId, 0, 50, 'OLDEST', true)
}

Ответы [ 2 ]

1 голос
/ 26 марта 2020

Судя по всему, вы получаете это, потому что ваша наблюдаемая не определена. Самый простой способ обойти это - использовать «оператор Элвиса» или опциональную цепочку.

Сделайте это вместо: (userPage | async)?.users

<tbody *ngIf="userPage && (userPage | async)?.users">
 <tr *ngFor="let u of (userPage | async)?.users">
 <td>{{u.firstName + " " + u.lastName}}</td>
 <td>{{branchName}}</td>
 </tr>
</tbody>

Вы также можете попробовать напечатать userPage для console, чтобы убедиться, что вы получаете ожидаемые данные. Кроме того, вы можете сделать {{ (userPage | async) | json }} в своем шаблоне.

0 голосов
/ 26 марта 2020

попробуйте использовать ng-container с async pipe, и когда у вас есть данные, будут доступны переменные результата 

<ng-container *ngIf="userPage | async as result ">
  <tbody >
    <tr *ngFor="let u of result.users">
     <td>{{u.firstName + " " + u.lastName}}</td>
     <td>{{branchName}}</td>
    </tr>
   </tbody>
 </ng-container>

отметьте это demo ?

...