Question

我有这些下拉菜单：

<div *ngFor="let filterItem of fields[0].searchParameters;  let i = index" class="custom">
  <label>{{filterItem.fieldlabel}}</label>
  <div class="form-group">
    <span [ngSwitch]="filterItem.fieldtype">
      <input ngDefaultControl [focusOnInit]="i"  *ngSwitchCase="'INPUT'" [ngModel]="selectedDevice" [ngModelOptions]="{standalone: true}" class="form-control-full" (change)="changeFilterValue(filterItem.value1)" (keydown)="keyDownFunction($event)"/>
      <select *ngSwitchCase="'LOV'"  class="form-control custom-select" type="text" [(ngModel)]="filterItem.value1" [ngModelOptions]="{standalone: true}" (change)="changeFilterValue(filterItem)">
        <option value="" ></option>
        <option *ngFor="let value of filterItem.values" [(value)]="value.code" required>{{value.displayName}}</option>
      </select>

      <select *ngSwitchCase="'LOVD'"  class="form-control custom-select" type="text" [(ngModel)]="filterItem.value1" [ngModelOptions]="{standalone: true}" (change)="changeFilterValue(filterItem)">
        <option value="" ></option>
        <option [hidden]="filterItem.defaultvalue1!=selectedLabel" *ngFor="let value of filterItem.values" [(value)]="value.code" required>{{value.displayName}}</option>
      </select>
    </span>
  </div>
</div>

对于每个下拉列表，我都有一个唯一的标识符。我有类型的下拉菜单：用户，标识，城镇和地址。

问题是：识别类型取决于用户类型，地址取决于城镇。我不知道如何添加该依赖项，以便在ngFor中告知该类型的标识取决于用户类型。任何建议我该怎么办？

我现在无法访问JSON，但看起来像这样，但所有下拉列表都有其余的数据。

fieds = [
  searchPamereters = [
    {
      fieldType:"typeOfUser",
      defaultvalue1 : 1,
      filedlabel:"Type of user"
      id:1,
      values = [
        {
        code: 100,
        displayName:"Regular"
        },

        {
        code: 200,
        displayName:"Basic"
        }
      ]
    }
  ]
]

我有一个API，我将在哪里传递这些参数我的问题只是如何告诉依赖于typeOfIdentification的下拉typeOfUser并告诉地址它依赖于城镇。

Answer 1

您可以使用对象存储与每组下拉列表相关的数据

<强>组件

people = ['Alice', 'Bob']
materials = ['glass','wood','metal'];
materialColours = {glass: ['green','blue'], wood: ['brown', 'red'], metal: ['silver', 'gold']};

data = { Alice: {}, Bob: {}} // Object to store the information

constructor() {
  this.name = `Angular! v${VERSION.full}`
  this.materialChange('wood', 'Alice');
  this.materialChange('glass', 'Bob');
}

materialChange(material, person) {
  this.data[person].material = material
  this.getMaterialColours(material)
    .subscribe(newColours => {
      this.data[person].colours = newColours
      console.log('new colours', newColours)
    })
}

// represents API call
getMaterialColours(material) {
  return Observable.of(this.materialColours[material])
}

<强>模板

<div *ngFor="let person of people">
  <h1>{{person}}</h1>
  <div>
    Material
    <select [(ngModel)]="data[person].material" (ngModelChange)="materialChange($event, person)">
      <option *ngFor="let material of materials" [value]="material">{{material}}</option>
    </select>
  </div>
  <div>
    Colours
    <select [(ngModel)]="data[person].chosenColour">
      <option *ngFor="let colour of data[person].colours" [value]="colour">{{colour}}</option>
    </select>
  </div>
</div>

Live plunker example

如何在ngFor中的多个下拉列表中依赖？

1 个答案: