在 Angular 中,在 mat 表中显示服务上作为地图类型的数据

问题描述 投票:0回答:1

强文本**我想在垫表中显示我的数据。我尝试了很多方法。哪种方法最有用?
数据显示在console.log中。
**
enter image description here

-服务补偿..

导出类 DataService 实现 OnInit、OndestroY {
...

  todayrss = new BehaviorSubject<Map<String, RssModel[]>>(undefined);

...
}

组件.TS----

export class ThirdTabComponent {

  dataSource: any[] = [];
  displayedColumns: string[] = ['poiName', 'taskName']; 

  constructor(private dataService: DataService) {
    this.dataService.todayrss.subscribe(data => {
      if (data && data.size > 0) {
        console.log('TODAY RSS', data);
      }
    });

  }
...
}

HTML

 <table mat-table [dataSource]="dataSource">
                          <ng-container matColumnDef="poiName">
                            <th mat-header-cell *matHeaderCellDef> ANAHTAR. </th>
                            <td mat-cell *matCellDef="let data"> {{data.poiName}} </td>
                          </ng-container>
                          <!-- Name Column -->
                          <ng-container matColumnDef="taskName">
                            <th mat-header-cell *matHeaderCellDef> Değer </th>
                            <td mat-cell *matCellDef="let data"> {{data.taskName}} </td>
                          </ng-container>
                          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                          <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
                        </table>
javascript angular rxjs
1个回答
0
投票

您需要分配数据!

constructor(private dataService: DataService) {
    this.dataService.todayrss.subscribe(data => {
      if (data && data.size > 0) {
        console.log('TODAY RSS', data);
        this.dataSource = data; // <- changed here!
      }
    });
}

接收数据的地方,调用BehaviourSubject的

next
方法即可!

todayrss = new BehaviorSubject<Object[]>>(undefined);
...

...
getData() {
    this.httpClient.get('/some-url').subscribe((response: any) => {
        this.todayrss.next(response);
    });
}
...
© www.soinside.com 2019 - 2024. All rights reserved.