尝试使用带有 ngFor 的异步管道来获取数据并动态显示 angular 6

Question

在 angular 6 应用程序中，我正在使用 "ng-select" https://github.com/ng-select/ng-select#getting-started select 框并触发 "change" 事件以从 API 方法并将它们分配给一个可观察对象，然后使用我的 html 中的异步管道来监听这个可观察对象的数组属性并将其显示在 table 中，尽管我是在 table 处检索数据，但在某个时刻它会抛出错误，因为属性的计算结果为 "null"、

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) 如果清除 selection，如何清除 table？

这是 html 中带有 ngFor "ng-select" 配置的 table:

<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>

这是 ts:

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)
}

Answer 1

从外观上看，您似乎得到了它，因为您的 observable 未定义。解决此问题的简单方法是使用 "elvis operator" 或可选链接。

改为这样做：(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 }}。

Answer 2

尝试将 ng-container 与 async 管道一起使用，当你有数据时，结果变量

将可用

<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

尝试使用带有 ngFor 的异步管道来获取数据并动态显示 angular 6

Trying to use async pipe with ngFor to fetch data and display dynamically angular 6

asynchronous

angular-ngselect

angular