Question

我对角度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>

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

1 个答案: