Question

这是我的html

 <form (ngSubmit)="onSubmit(editBook)" #editBook="ngForm" [hidden]="success">

    <div class="card-body" *ngFor="let bookInstance of bookInstanceList; let i=index; trackBy: trackByBookList;">    
        <label for="'status'+i">Book Status</label>
                        <select class="form-control" id="'status'+i" required [(ngModel)]="bookInstance.status" name="'status'+i">
                          <option *ngFor="let stat of statusList" [ngValue]="stat">{{stat}}</option>
                        </select>
        </div>
</form>

这是我的状态列表

   export class BookDetailComponent implements OnInit {

      @Input() book: any[];

      public statusList = ['Available', 'Not Available'];

public bookInstanceList = [
      {"status": "Not Available"},
      {"status": "Available"}
    }

当前值已相应绑定，这非常好。但是，第一个bookInstance的第一个选项值显示为“ Available”。但是如您所见，bookInstanceList的第一个元素是“ Not Available”。我如何获得显示“不可用”值的选项？

Answer 1

与名称的绑定索引应为name="status+ {{i}}"

  <select class="form-control" id=" status+ {{i}}" required [(ngModel)]="bookInstance.status" name="status+ {{i}}">

Demo

Angular 5 ng对于表单标签中的ngModel选择选项

1 个答案: