在模板变量中使用 *ngfor 的值

Question

我必须使用选择标签来选择社交句柄的类型

我已经在 .ts 文件的一个数组中存储了一个 select 的可能值数组。

socialHandleOptions=['Website', 'Facebook', 'Instagram', 'LinkedIn'];

我正在使用 *ngfor 来迭代值，但我没有在另一个标签中获取它，因为我需要存储与特定社交句柄 formcontrol 字段相对应的值。

我尝试使用模板变量，但无法获取值。

              <div class="row">
                <div class="col-md-4 col-sm-5">
                  <select>
                    <option *ngFor="let handle of socialHandleOptions" #hnd >{{handle}}</option>
                  </select>
                </div>

                <div class="col-md-8 col-sm-7 pl-sm-1">
                  <input type="text" formControlName={{hnd}} placeholder="Enter URL">
                </div>
                <a (click)="handleConsole(hnd)"><img src="assets/img/profile/minus.svg" alt=""></a>
              </div>

Answer 1

您需要将所选选项分配给一个变量，然后在另一个标签中使用该变量。它可能会解决您的问题。

<mat-form-field appearance="fill">
    <mat-label>Favorite food</mat-label>
    <mat-select [(ngModel)]="selectedValue" name="food">
      <mat-option *ngFor="let food of foods" [value]="food.value">
        {{food.viewValue}}
      </mat-option>
    </mat-select>
</mat-form-field>

<input type="text" formControlName="selectedValue" placeholder="Enter URL">

Answer 2

据我了解，您有 formArray 的图片，并且您有一个与所选社交帐户类型相关的社交和链接的下拉列表，这意味着您可能有两条与 Facebook 相关的记录作为示例

模板

<ng-container *ngFor="let fg of socialForm.controls">
    <div class="col-md-4 col-sm-5" [formGroup]="fg">
        <select formControlName="socialAccountType">
      <option *ngFor="let handle of socialHandleOptions"  >{{handle}}</option>
    </select>

        <input type="text" formControlName="link" placeholder="Enter URL">
  </div>

</ng-container>

<button (click)="addNew()">Add New ➕</button>

<pre>{{socialForm.value | json}}</pre>

组件

  socialForm :FormArray;
  socialHandleOptions=['Website', 'Facebook', 'Instagram', 'LinkedIn'];

  constructor(private fb:FormBuilder){
    this.socialForm = fb.array([this.getFormGroupItem()])
  }

  getFormGroupItem() : FormGroup{
    return this.fb.group({
      socialAccountType:null,
      link:null
    })
  }

  addNew(){
     this.socialForm.push(this.getFormGroupItem())
  }

demo ??

另一个使用 formGroup 的案例有一个社交类型的表单控件，但我仍然不确定链接输入旁边的加号图标

模板

<div [formGroup]="socialForm">

    <ng-container *ngFor="let c of socialHandleOptions">
        <div class="col-md-4 col-sm-5">
            <label>{{c}}</label>
            <input type="text" [formControlName]="c | lowercase" placeholder="Enter URL">
  </div>

    </ng-container>
</div>

组件

 socialForm: FormGroup;
  socialHandleOptions = ["Website", "Facebook", "Instagram", "LinkedIn"];

  constructor(private fb: FormBuilder) {
    this.socialForm = this.fb.group({
      website: null,
      facebook: null,
      instagram: null,
      linkedin: null
    });
  }

demo ??