Question

现在我正在使用订阅Http GET请求

问题：

如何使用Observable在不刷新页面的情况下显示数据？

这是我的Http GET方法调用：

 this.http.get(this.tenant_userlist).subscribe(response =>{
  this.users = response;
  this.dataSource.data = this.users;
});

我正在使用角度材料表：

HTML：

          <mat-table [dataSource]="dataSource" matSort>
            <ng-container matColumnDef="user_id">
              <mat-header-cell *matHeaderCellDef mat-header-cell mat-sort-header> User UID </mat-header-cell>
              <mat-cell *matCellDef="let row" data-label="User UID"> {{row.user_id}} </mat-cell>
            </ng-container>

            <ng-container matColumnDef="first_name">
              <mat-header-cell *matHeaderCellDef mat-header-cell mat-sort-header> First Name </mat-header-cell>
              <mat-cell *matCellDef="let row" data-label="First Name" class="tab-data"> {{row.first_name}} </mat-cell>
            </ng-container>

            <ng-container matColumnDef="last_name">
              <mat-header-cell *matHeaderCellDef mat-header-cell mat-sort-header> Last Name </mat-header-cell>
              <mat-cell *matCellDef="let row" data-label="Last Name"> {{row.last_name}} </mat-cell>
            </ng-container

            <ng-container matColumnDef="email_id">
              <mat-header-cell *matHeaderCellDef mat-header-cell mat-sort-header> Email ID </mat-header-cell>
              <mat-cell *matCellDef="let row" data-label="Email ID"> {{row.email_id}} </mat-cell>
            </ng-container>

            <ng-container matColumnDef="action">
              <mat-header-cell *matHeaderCellDef  > Action </mat-header-cell>
              <mat-cell *matCellDef="let row" data-label="Action"> 
                <button type="button" class="btn btn-sm shadow btnTable" >Edit</button>
              </mat-cell>  
            </ng-container>
            
            <mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
            <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
            
          </mat-table>

Answer 1

您可以显示几种方式。

Angular Twitter社区喜欢模板驱动的方法。与@StyrianDev答案类似，但您无需在组件中订阅http请求。

// component.ts

ngOnInit() {
    this.users = this.http.get(this.tenant_userlist);
}

在HTML中：

// component.html

<div *ngFor='let user of users | async'>
    {{user.name}}
</div>

// mat-table
<mat-table [dataSource]="users | async" matSort>

或者您可以采用组件驱动的方法，类似于上面的操作。

ngOnInit() {
    this.http.get(this.tenant_userlist).subscribe(response =>{
        this.users = response;
        this.dataSource = this.users;
    });
}

HTML：

<div *ngFor='let user of users'>
    {{user.name}}
</div>

// mat-table
<mat-table [dataSource]="dataSource" matSort>

注意：如果要在模板中使用AsyncPipe，则需要导入CommonModule。

Answer 2

您将要使用@StyrianDev所提到的异步管道，但在您的情况下，它应如下所示：

<div *ngIf="users | async as users">
         <mat-table [dataSource]="users" matSort>
            <ng-container matColumnDef="user_id">
              <mat-header-cell *matHeaderCellDef mat-header-cell mat-sort-header> User UID </mat-header-cell>
              <mat-cell *matCellDef="let row" data-label="User UID"> {{row.user_id}} </mat-cell>
            </ng-container>

            <ng-container matColumnDef="first_name">
              <mat-header-cell *matHeaderCellDef mat-header-cell mat-sort-header> First Name </mat-header-cell>
              <mat-cell *matCellDef="let row" data-label="First Name" class="tab-data"> {{row.first_name}} </mat-cell>
            </ng-container>

            <ng-container matColumnDef="last_name">
              <mat-header-cell *matHeaderCellDef mat-header-cell mat-sort-header> Last Name </mat-header-cell>
              <mat-cell *matCellDef="let row" data-label="Last Name"> {{row.last_name}} </mat-cell>
            </ng-container

            <ng-container matColumnDef="email_id">
              <mat-header-cell *matHeaderCellDef mat-header-cell mat-sort-header> Email ID </mat-header-cell>
              <mat-cell *matCellDef="let row" data-label="Email ID"> {{row.email_id}} </mat-cell>
            </ng-container>

            <ng-container matColumnDef="action">
              <mat-header-cell *matHeaderCellDef  > Action </mat-header-cell>
              <mat-cell *matCellDef="let row" data-label="Action"> 
                <button type="button" class="btn btn-sm shadow btnTable" >Edit</button>
              </mat-cell>  
            </ng-container>

            <mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
            <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>

          </mat-table>
    </div>

这意味着users应该是可观察的。在该组件的ts文件中，应声明users属性，并应在ngOnInit生命周期挂钩中设置值，以从HttpClient.Get方法返回可观察对象。

users: Observable<User[]>;

ngOnInit() {
   this.users = this.http.get(this.tenant_userlist);
}

Answer 3

要显示此内容，请异步使用以下语法：

<div *ngFor='let user of users | async'>
    {{user.name}}
</div>

如何在角度观察者

问题：

3 个答案: