Question

您好我在我们的应用程序中使用smarttable（即可重用表）。我将通过一个组件文件中的设置发送数据，并在组件中重复使用。问题是我无法在一个组件的dropdown.settings中绑定嵌套值

 '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
                }

            ]

在filterComponent中我得到了这个数据：

 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'
});

}

并在console.log中获取数据数组

在Html中我正在使用这样：

<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>

到：

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

请详细了解ngFor，ngModel，ngIf。

如何在可重用表中重复列值

1 个答案: