如何从表单数组的下拉框中获取选定的值

<ng-container formArrayName="actors">
   <ng-container *ngFor="let actor of actors['controls']; let i = index">
      <ng-container>
        <div [formGroupName]="i">

          <div class="container mt-3">
            <div class="row justify-content-center">
               <label class="col-3 mt-2 text-end">Add Existing actor </label>
                  <div class="col-6" >
 
                    <!-- I want to get the value selected from this dropdown box -->
                    <select class="form-select form-select-sm d-flex justify-content-center">
                       <option *ngFor="let actor of existingActors" >
                             {{actor.firstName}} {{actor.lastName}}
                       </option>
                    </select>

我想从表单数组的下拉框中获取用户选择的值。但是当我使用 ngModel 时，它给了我一个错误。如何从下拉框中获取值而不循环遍历 TS 文件中的整个数组。

您可以拥有 FormControls 的 FormArray 或 FormGroup 的 FormArray。 （好吧，你也可以有一个 FormArray 的 FormArray 来管理多维数组，但这与你的问题无关）

如果您可以获得“简单变量”数组，例如[1,2,3] 或 ["a","b","b"] 如果您可以获得对象数组，则可以使用 FormControls 的 FormArray，例如[{id:1},{id:2}..] 你需要一个 FormGroups 的 FormArray

一个FormArray的FormGroup你使用的方式

<div formArrayName="actors">
   <div *ngFor="let group of actors.controls;let i=index"
        [formGroupName]="i">
        <input formControlName="id">
   </div>
</div>

请注意，在这种情况下您使用[formGroupName]="i"和里面formControlName

一个 FormArray 的 FormControls 你使用的方式

<div formArrayName="actors">
   <div *ngFor="let control of actors.controls;let i=index">
        <input [formControlName]="i">
   </div>
</div>

请注意，在本例中您在自己的输入中使用[formControlName]="i"

好吧，当我们有一个选择等于一个输入时

如果它是 FormGroups 的 FormArray

<div formArrayName="actors">
   <div *ngFor="let group of actors.controls;let i=index"
        [formGroupName]="i">

        <select formControlName="id">
          <option *ngFor="let actor of existingActors" [value]="actor.id" >
               {{actor.firstName}} {{actor.lastName}}
          </option>
        </select>

   </div>
</div>

如果它是 FormControls 数组

<div formArrayName="actors">
   <div *ngFor="let control of actors.controls;let i=index">

        <select [formControlName]="i">
          <option *ngFor="let actor of existingActors" [value]="actor.id" >
               {{actor.firstName}} {{actor.lastName}}
          </option>
        </select>

   </div>
</div>

不过要小心！！您想在 FormControl 中存储什么？因为这是指令[value]在选项中。如果您想存储数组参与者的属性，例如我想你的演员有一个你使用的属性“id”[value]="actor.id"，但是您可以存储“整个对象演员”，即您使用的[ngValue]="actor".

关于存储整个对象的广告。如果是表单控件的 formArray 或 formGroup 的 FormArray，则可以在 FormControl 中独立存储对象。在第一种情况下，你会得到一些类似的东西formArray:[{id:..,first:name:..},{id:..,first:name:..},]在第二个中formArray:[id:{id:..,first:name:..},id:{id:..,first:name:..},]

此外，如果您存储整个对象，则在赋值和比较值时需要小心