Question

到目前为止，我已经编写了以下代码来显示下拉列表。但是所选的值和选项不会显示在下拉菜单中。在以下代码中我做错的地方。

组件代码

testForm: FormGroup;
get ctrls() {
  return this.testForm.get('ctrls') as FormArray;
}
data = [{
    initial: 'hen',
    options: ['hen', 'duck', 'parrot']
  },
  {
    initial: 'lion',
    options: ['lion', 'tiger', 'cheetah']
  }
];

constructor(private router: Router, private formBuilder: FormBuilder) {
  this.testForm = this.formBuilder.group({
    ctrls: this.formBuilder.array([])
  });
  for (let i = 0; i < this.data.length; i++) {
    this.ctrls.push(this.formBuilder.control(this.data[i]));
  }
}

模板代码

<form [formGroup]="testForm">
  <div formArrayName="ctrls" *ngFor="let animals of ctrls.controls; let i = index">
    <mat-form-field>
      <mat-select [formControlName]="i" [(value)]="animals.value.initial">
        <mat-select-trigger>{{ animals.value.initial }}</mat-select-trigger>
        <mat-option *ngFor="let animal of animals.value.options" [value]="animal">{{ animmal }}</mat-option>
      </mat-select>
    </mat-form-field>
  </div>
</form>

请以正确的方式指导我...

请找到stackblitz来检查问题

Answer 1

使用data中的选项代替使用控制器中的选项。

此外，由于数据是字符串而不是对象，因此您需要使用this.data[i].initial来初始化formControl。我还使用控制器而不是controllerName稍微更改了html，因为您已经有对其的引用。我也删除了[value]中的mat-select属性，因为您正在组件中设置值。使用[value]更适合模板驱动而不是反应形式，并且两者都可能引起副作用。

html：

<form [formGroup]="testForm">
  <div *ngFor="let animals of ctrls.controls; let i = index">
    <mat-form-field>
      <mat-select [formControl]="animals">
        <mat-option *ngFor="let animal of data[i].options" [value]="animal">{{ animal }}</mat-option>
      </mat-select>
    </mat-form-field>
  </div>
</form>

在ts文件中：

ngOnInit() {
 this.testForm = this.formBuilder.group( {
   ctrls : this.formBuilder.array( [] )
 });
 for( let i = 0; i < this.data.length; i++ ) {
   this.ctrls.push( this.formBuilder.control( this.data[ i ].initial ) );
 }
}

https://stackblitz.com/edit/angular-material-design-q3wbah

编辑：

阅读注释后，想要在formControl中有一个对象作为数据，我将使用类似的方法来更改数据。

  data = [ 
    { options : [
      {name:'hen', icon: 'someIcon'},
      {name:'duck', icon: 'asd'},
      {name: 'parrot', icon: 'asdasd'} ] }
  ];

然后，如果您需要放入正确的初始对象，那么我会将名称与初始对象进行匹配，以便获得正确的指针。在下面的示例中，我只选择了第一个元素。

然后，您可以按照最初希望的那样使用<mat-select-trigger>。

https://stackblitz.com/edit/angular-material-design-new-data

Answer 2

您有错字

animmal

此外，您应该将代码从构造函数中移至ngOnInit方法

签出：https://stackblitz.com/edit/angular-material-design-m491ic?file=src%2Fapp%2Fapp.component.ts

接下来，我相信您混淆了formControls。我稍微改变了整个逻辑，希望您可以使用它。

基本上，这些选项需要移出formcontrol

<mat-form-field>
  <mat-select
  [formControl]="animals"
  >
    <mat-option 
      *ngFor="let animal of data[i].options; let j = index"
      value="{{animal}}"
    >{{ animal }}</mat-option>
  </mat-select>
</mat-form-field>

然后我更改了表单组定义

this.testForm = this.formBuilder.group( {
      ctrls : this.formBuilder.array( [] )
    } );
    for( let i = 0; i < this.data.length; i++ ) {
      this.ctrls.push( new FormControl({value: this.data[i].initial, disabled: false}) );
    }

通过formarray进行Mat-select不会显示选定的值和选项-响应式Angular

2 个答案: