Angular 5 - 如何根据表格中呈现的数据填充数据答案

【问题标题】：Angular 5 - How to populate data based on the data rendered in the tableAngular 5 - 如何根据表格中呈现的数据填充数据
【发布时间】：2018-06-15 10:13:27
【问题描述】：

在一个页面上，我有多个表格。每个表都属于一个选项卡。每个表有 2 列 - 字段名称和注释。我正在使用 http-client 通过 REST API 调用获取数据。使用this._dataService.getBrandTabs 和this._dataService.getBrandFields(tabIdArr)，我正在填充选项卡和相关字段。但是，为了呈现注释，它需要传递与注释关联的字段 id。页面呈现字段后如何传递字段ID？

TS 组件

ngOnInit() {
 this.route.params.subscribe(res => this.brandId = res.id);
 this.listTabs();
 console.log(this.fieldsList);
}

listTabs(){
    this.fieldsList = [];
    this._dataService.getBrandTabs(this.brandId)
      .subscribe((response) => {
        this.tabsList = response;

        const ids = [];
        for (let i=0; i<this.tabsList.length; i++){
          ids.push(this.tabsList[i].id);
          }
        this.listFields(ids);
      })
  }

listFields(tabIdArr){
    this._dataService.getBrandFields(tabIdArr).subscribe(field => {
      this.fieldsList.push(field);
    })
  } 

listNotes(fieldId){
 this._dataService.getBrandNote(field.id).subscribe(note => {
          this.notes.push(note);
        })
}

HTML

<table *ngFor="let tab of tabsList; let i=index;" class="tab">
    <thead>
      <tr>
        <td class="tab-title">{{tab.tab_name}}</td>
      </tr>
    </thead>
    <tbody>
    <tr>
      <td class="fields-list-wrapper">
        <table class="fields-list">
          <tr>
            <th class="field-name">Field Name</th>
            <th class="notes">Notes</th>
          </tr>
          <tr *ngFor="let field of fieldsList[i]; let fieldIndex = index;" class="field">
            <td>
              <p>{{field.field_name}}</p>
            </td>
            <td>
              <p>{{notes[fieldIndex]}}</p>
            </td>

            <td>
              <button class="edit-field-btn" mat-button (click)="editNotes(field)">Edit</button>
            </td>
          </tr>
        </table>
      </td>
    </tr></tbody>
  </table>

数据服务

getBrandTabs(brand_id){
        return this.http.get(this.base_url + 'brands/' + brand_id + '/brand_tabs?sort={"sequence": "ASC"}')
        .map(data => {
            return data;
        });
    }

 getBrandFields(brand_tab_ids: number[]): Observable<any> {
        return <Observable<any>> forkJoin(
            brand_tab_ids.map((brand_tab_id) => {
              return <Observable<any>>  this.http.get(this.base_url + 'brand_tabs/' + brand_tab_id + '/brand_fields?sort={"sequence": "ASC"}')})
            ).pipe(concatAll());
          }

getBrandNote(brand_field_id){ 返回 this.http.get(this.base_url + 'brand_fields/' + brand_field_id + '/brand_notes') .map(数据 => { 返回数据； }); }

【问题讨论】：

标签： angular

【解决方案1】：

在您的 html 中：

    <tr *ngFor="let field of fieldsList[i]; let fieldIndex = index;" class="field">
        <td>
          <p>{{field.field_name}}</p>
        </td>
        <td>
          <-- added code -->
          <p>{{getNotes(field.id)}}</p>

        </td>

        <td>
          <button class="edit-field-btn" mat-button (click)="editNotes(field)">Edit</button>
        </td>
</tr>

在ts中：

 getNotes(id){
   // use id here .
   const notes = this.notes.filter(n => n.id === id); // example
   retutn notes;
}

希望对你有帮助。

【讨论】：

进入无限循环。