再利用可能なテーブルで列の値を繰り返す方法

Question

こんにちは私は私たちのアプリケーションでスマートテーブル（すなわち再利用可能なテーブル）を使用しています。ここで私は1つのコンポーネントファイルから設定を介してデータを送信し、コンポーネントで再利用可能になります。

moreFilters() { 
    console.log('moreFilters: %o', this.smartTable.queryParameters.filter); 

    // Prepare moreFilterFields information from smartTable.settings 
    if (this.moreFilterFields.length === 0) { 
    let columnsettings = this.smartTable.settings['columnsettings']; 
    let fieldCount = 0, rowCount = 0; 
    // Have 3 fields in one object 
    for (let column of columnsettings) { 
     if (fieldCount === 3) { 
     fieldCount = 0; 
     rowCount++; 
     } 
     if (fieldCount === 0) { 
     this.moreFilterFields[rowCount] = []; 
     } 
     this.moreFilterFields[rowCount][fieldCount] = {}; 
     this.moreFilterFields[rowCount][fieldCount]['field'] = column['field']; 
     this.moreFilterFields[rowCount][fieldCount]['headerName'] = column['headerName']; 
     this.moreFilterFields[rowCount][fieldCount]['type'] = column['type']; 
     this.moreFilterFields[rowCount][fieldCount]['data'] = column['data']; 
     console.log(this.moreFilterFields[rowCount][fieldCount]['data']) 
     fieldCount++; 
    } 
    } 

this.dialogService.addDialog(FilterComponent, { 
    addMorefilters: true, 
    showFilters: false, 
    moreFilterFields: this.moreFilterFields, 
    smartTable: this.smartTable, 
    title: 'More Fiters' 
}); 

}

やコンソールにもデータ配列を取得：問題は、私は、このデータを取得していますfilterComponentに一つの成分

'columnsettings': [ 
       { 
        headerName: "First Name", 
        field: "firstName" 
       }, 
       { 
        headerName: "Last Name", 
        field: "lastName" 
       }, 
       { 
        headerName: "Type", 
        field: "petitionType", 
        type: 'dropDown', 
        data: this.getPetitionTypeValues() 
       }, 
       { 
        headerName: "Updated On", 
        field: "lastUpdate", 
        type: 'datePicker' 
       }, 
       { 
        headerName: "Status", 
        field: "status", 
        type: 'dropDown', 
        data: this.statusTypes 
       } 

      ] 

からdropdown.settingsにネストされた値を結合することができIAMではありません.log

私はこのように使っています：

<div class='row' *ngFor="let row of moreFilterFields"> 
        <div class='col-sm-4' *ngFor="let column of row"> 
         <div class='form-group'> 
          <label for="filter_{{column['field']}}">{{column['headerName']}}</label> 
          <input class="form-control" id="filter_{{column['field']}}" name="filter[{{column['field']}}]" [(ngModel)]="column['value']" size="30" type="text" *ngIf="column['type'] == dropdown "/> 

          <select *ngIf="column['type'] != dropdown " > 
          <option [(ngModel)]="column['value']">{{column['data']}}</option> 
          </select> 

         </div> 
        </div> 
       </div> 

全体配列は、オブジェクト形式の配列でバインドされています。ドロップダウンリストの使い方

Answer 1

データは次のようになります場合は、次へ

0 : { display: "H1B", value: "H1B" } 
1 : { display: "L1", value: "L1" } 

変更この

<select *ngIf="column['type'] != dropdown " > 
    <option [(ngModel)]="column['value']">{{column['data']}}</option> 
</select> 

：ngFor、ngModel、ngIfについての詳細を読む

<select *ngIf="column['type'] == dropdown " > 
    <option *ngFor="let optionData of column['data']" [value] = 'optionData.value'> 
     {{ optionData.display }} 
    </option> 
</select> 

を行ってください。