Javascript Mat select by formarray不显示所选值和选项-反应型

到目前为止，我已经编写了以下代码来显示下拉列表。但选定的值和选项不会出现在下拉列表中。在下面的代码中我做错了什么

部件代码

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>

testForm:FormGroup；
获取ctrls（）{
将这个.testForm.get（'ctrls'）作为FormArray返回；
}
数据=[{
首字母“hen”，
选项：[“母鸡”、“鸭子”、“鹦鹉”]
},
{
首字母：'狮子'，
选项：[“狮子”、“老虎”、“猎豹”]
}
];
构造函数（专用路由器：路由器，专用formBuilder:formBuilder）{
this.testForm=this.formBuilder.group({
ctrls:this.formBuilder.array（[]）
});
for（设i=0；i

模板代码

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>

{{anies.value.initial}
{{animmal}}

请用正确的方式引导我

请查找以检查问题

您有打字错误

animmal

---

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

退房：

接下来，我相信您混淆了

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>

{{动物}}

我改变了formgroup的定义

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

this.testForm=this.formBuilder.group（{
ctrls:this.formBuilder.array（[]）
} );
for（设i=0；i

使用

数据中的选项，而不是使用控制器中的选项

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

html:

然后，如果您需要输入正确的初始对象，我会将名称与初始对象匹配，这样您就可以得到正确的指针。我只选择了下面示例中的第一个元素

然后，您可以使用
，我相信这是您最初想要的

您有一个输入错误：
animmal
-->
animal
，然后works@rst这很好，仍然选择的值并没有额外显示，您应该将构造函数中的所有代码移动到ngOnInit@rst很好，我这样做了，仍然没有在我的答案中显示值，我稍微改变了整个逻辑，希望您能使用它。这很好，但我想在
表单控件中传递值的对象
有什么建议吗？谢谢，收到您的建议。但我想从控件访问另一个属性，如选定选项的图标和选定选项的值，所以需要传递object而不是stringThen，如果可能的话，我可能会重新构造数据
  data = [ 
    { options : [
      {name:'hen', icon: 'someIcon'},
      {name:'duck', icon: 'asd'},
      {name: 'parrot', icon: 'asdasd'} ] }
  ];