如何以角度用户观察者

Question

Right now I am using subscribe for my Http GET request

Question:

how can I use Observable which will display the data without refreshing the page?

This is my Http GET method call:

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

I am using angular material table:

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

You can display a couple ways.

The Angular Twitter community has taken a liking to a template driven approach. Similar to @StyrianDev answer, but you won't need to subscribe to the http request in the component.

// component.ts

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

And in the HTML:

// component.html

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

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

Or you can take a component driven approach, similar to what you are doing above.

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>

Note: If you want to use the AsyncPipe in your template, you'll need to import the CommonModule.

Answer 2

You will want to use the async pipe as @StyrianDev mentioned, but in your case it should look like this:

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

This means that users should be an observable. In your ts file for this component, you should have your users property declared and you should set the value in the ngOnInit life cycle hook to return the observable from the HttpClient.Get method.

users: Observable<User[]>;

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

Answer 3

To display this.users async just use the following syntax:

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