在Angular 4中的formArray中一次迭代两个元素

Question

我对 Angular 4 比较陌生，但遇到以下问题： 我正在构建一个包含 formArray 的反应式表单。 我的表单组是：

buildListInfoForm() {
this.listInfoForm = this._fb.group({
    id: new FormControl({value: this.currentListInfo.id, disabled: true}),
    belongsToProject: [this.currentListInfo.projectIri, Validators.required],
    labels: this._fb.array([]),
    comments: this._fb.array([])
});

我的标签是对象：

labels = {
    name: '',
    language: ''
}

每个标签都有名称和语言。我需要以反应形式获取每种语言的相应标签名称。
即我有一个下拉菜单，我可以在其中选择语言，在它旁边我有一个输入字段，根据所选语言显示正确的名称。此名称应该是可编辑的，并且应该可以添加更多字段（语言+名称组合）。
我觉得这应该很容易做到，但我完全卡住了，因为我只能迭代名称或语言，但不能同时迭代两者……

<h4>Labels</h4>
<span *ngIf="labels" formArrayName="labels">
     <div *ngFor="let label of labels.controls; let i=index" [formGroupName]="i">
        <mat-form-field class="width-80">
            <input matInput
                placeholder="Value"
                formControlName="value">
        </mat-form-field>
        <mat-form-field class="width-10">
            <mat-select formControlName="language">
                <mat-option value="" disabled>Select language</mat-option>
                <mat-option value="en">en</mat-option>
                <mat-option value="de">de</mat-option>
                <mat-option value="fr">fr</mat-option>
                <mat-option value="it">it</mat-option>
                <!--<mat-option *ngFor="let label of labels.controls" [value]="label.get('language').value">-->
                <!--{{label.get('language').value}}-->
                <!--</mat-option>-->
            </mat-select>
        </mat-form-field>
     </div>
     <button mat-button
        class="right"
        [color]="'primary'"
        (click)="addLabel()">
            Add Label
     </button>
</span>

有什么建议吗？

Answer 1

您正在为循环中的每个标签创建一个select 元素。我想这不是你需要的。如果您绝对需要在每个选项旁边有一个输入，您可以将选项包装到 div 中并在每个选项旁边添加一个输入标签，如下所示：

<h4>Labels</h4>
<span *ngIf="labels" formArrayName="labels">
    <mat-select formControlName="language">
        <div *ngFor="let label of labels.controls; let i=index" [formGroupName]="i">
            <mat-form-field class="width-80">
                <input matInput
                    placeholder="Value"
                    value="label.get('name').value"
                    formControlName="value">
            </mat-form-field>
            <mat-form-field class="width-10">
                <mat-option value="" disabled>Select language</mat-option>
                <mat-option[value]="label.get('language').value">
                    {{label.get('language').value}}
                </mat-option>
            </mat-form-field>
        </div>
    </mat-select>
    <button mat-button
        class="right"
        [color]="'primary'"
        (click)="addLabel()">
            Add Label
    </button>
</span>