在Angular 4中的formArray中一次迭代两个元素 [英] Iterate two elements at once in a formArray in Angular 4

问题描述

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

buildListInfoForm() {this.listInfoForm = this._fb.group({id: new FormControl({value: this.currentListInfo.id, disabled: true}),ownToProject: [this.currentListInfo.projectIri, Validators.required],标签:this._fb.array([]),评论:this._fb.array([])});

我的标签是对象:

labels = { 名称:''，语言:''}

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

标签
<span *ngIf="labels" formArrayName="labels"><div *ngFor="let label of labels.controls; let i=index" [formGroupName]="i"><mat-form-field class="width-80"><输入垫输入占位符=值"formControlName="值"></mat-form-field><mat-form-field class="width-10"><mat-select formControlName="语言"><mat-option value="" disabled>选择语言</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>

<按钮垫按钮类=正确"[颜色]="'主要'"(点击)="addLabel()">添加标签</span>

有什么建议吗?

解决方案

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

标签
<span *ngIf="labels" formArrayName="labels"><mat-select formControlName="语言"><div *ngFor="let label of labels.controls; let i=index" [formGroupName]="i"><mat-form-field class="width-80"><输入垫输入占位符=值"value="label.get('name').value"formControlName="值"></mat-form-field><mat-form-field class="width-10"><mat-option value="" disabled>选择语言</mat-option><mat-option[value]="label.get('language').value">{{label.get('language').value}}</mat-option></mat-form-field>

</mat-select><按钮垫按钮类=正确"[颜色]="'主要'"(点击)="addLabel()">添加标签</span>

I am relatively new to angular 4 and I am stuck with the following problem: I am building a reactive form which contains a formArray. My form group is:

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([])
});

My labels are objects:

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

Each label has a name and a language. I need to get the corresponding label name for each language in a reactive form.
i.e. I have a dropdown menu where I can select the language and next to it I have an input field where according to the selected language, the correct name is show. This name should be editable and also it should be possible to add more fields (language+name combinations).
I feel this should be easy to do but I am completely stuck, as I only manage to iterate either the name or the language, but not both at the same time…

<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>

Any suggestions?

解决方案

You are creating a select element for each label in a loop. I guess that's not what you need. If you absolutely need to have an input next to each option you can wrap the options into divs and add an input tag next to each option like so:

<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中一次迭代两个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！