как пользовательский наблюдатель в angular - PullRequest
Новая
       77

как пользовательский наблюдатель в angular

0 голосов
/ 30 января 2020

Прямо сейчас я использую подписку на мой запрос Http GET

Вопрос:

как я могу использовать Observable, который будет отображать данные без обновления страницы?

Это мой вызов метода HTTP HETP: 

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

Я использую angular таблица материалов:

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>

Ответы [ 3 ]

1 голос
/ 30 января 2020

Вы можете отобразить пару способов.

Angular Сообщество Твиттера привыкло к шаблонно-ориентированному подходу. Аналогичен ответу @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.

1 голос
/ 30 января 2020

Вы захотите использовать канал asyn c, как упомянуто @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);
}
0 голосов
/ 30 января 2020

Для отображения this.users asyn c просто используйте следующий синтаксис: 

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