используя значение * ngfor в переменной шаблона

Question

Мне нужно использовать тег select для выбора типа социальных дескрипторов

i have stored an array of the possible values of select in an array in .ts file.

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

i am using *ngfor to iterate over the values, but i am not getting it in another tag, as i need to store the values corresponding to a particular social handle formcontrol field.

i tried using template variables, but couldn't get the values.

Answer 1

как я понимаю из изображения, которое у вас есть formArray, и у вас есть раскрывающийся список социальных сетей и ссылок, связанных с выбранным типом социальной учетной записи, это означает, что у вас могут быть две записи, связанные с Facebook , например

шаблон

    
        
      {{handle}}
    

        
  



Add New ➕

{{socialForm.value | json}}

компонент

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

демонстрация ??

в другом случае с использованием 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
    });
  }

демо ??

Answer 2

Вам нужно назначить выбранную вами опцию одной переменной, а затем использовать эту переменную в другом теге. Это может решить вашу проблему.

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