Question

在页面上我有多个表格。每个表都属于一个选项卡。每个表有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（data =＆gt; { 返回数据; }）; }

Answer 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;
}

希望它有所帮助。

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

1 个答案: