Angular 4 - ngModelChange throw 在两个 select 表单绑定期间无法读取未定义的属性 '...'

Question

我有以下 json 模型，并希望有两个 select 表单（下拉列表），其中第一个下拉列表将包含 title 而第二个下拉列表包含 authors，其值取决于要选择的 title（第一个标题有两个，第二个有三个）。

 {
        "id": 1,
        "title": "bookA",
        "authors": [
            "authorA",
            "authorB"
        ]
},
 {
        "id": 2,
        "title": "bookB",
        "authors": [
            "authorA",
            "authorB",
            "authorC"
        ]
},

我是 Angular 4 的新手，但在四处搜索后，我在 html 中找到了以下代码：

        <div class="form-group row">
            <label for="bookTitleField" class="col-sm-2 col-form-label">Title</label>
            <div class="col-sm-2">
                <select [(ngModel)]="currentInput.book.id" name="bookTitle" 
                (ngModelChange)="selectedBook=$event.target.value">
                    <option *ngFor="let b of books | async" value="{{b.id}}">{{b.title}}</option>
                </select>
            </div>
            <label for="bookAuthorField" class="col-sm-2 col-form-label">Author/label>
            <div class="col-sm-4">
                <select [(ngModel)]="currentInput.book.authors" *ngIf="currentInput.book.id" name="author">
                    <option *ngFor="let a of selectedBook" value="{{a.authors}}">{{a.authors}}</option>
                </select>
            </div>
        </div>

第一个下拉菜单按预期工作，但是当单击第二个时，抛出错误：

ERROR TypeError: Cannot read property 'value' of undefined

代码的哪一部分不正确？

Answer 1

您的代码应该可以工作，但现在很难说。另一种方法是使用如下所示的函数，

<div *ngIf="books">              //added this condition
        <select [(ngModel)]="currentInput.book.id" name="bookTitle" 
                (ngModelChange)="setValue($event)">
</div>
setValue(model){
  this.selectedBook=model.target.value;
}

Answer 2

您模板中的 undefined 是 target。您可能希望使用 $event.id 从第一个下拉列表中获取 id 值。您还想使用 [ngValue] 在第一个下拉列表中绑定整个对象，以便您可以在下一个下拉列表中显示作者。所以将你的代码修改成这样：

<select [(ngModel)]="chosenBook" name="bookTitle" (ngModelChange)="selectedBook.id = $event.id">
   <option *ngFor="let b of books | async" [ngValue]="b">{{b.title}}</option>
</select>

<label>Author</label>
<select [(ngModel)]="selectedBook.author">
  <option *ngFor="let a of chosenBook.authors">{{a}}</option>
</select>

另外记得初始化你的 selectedBook 和 chosenBook 这样你就不会得到 undefined 错误。

StackBlitz

Angular 4 - ngModelChange throw 在两个 select 表单绑定期间无法读取未定义的属性 '...'

Angular 4 - ngModelChange throw cannot read property '...' of undefined during two select form binding

undefined

drop-down-menu

angular

angular-ngmodelchange

Angular 4 - ngModelChange throw 在两个 select 表单绑定期间无法读取未定义的 属性 '...'

Angular 4 - ngModelChange throw cannot read property '...' of undefined during two select form binding

undefined

drop-down-menu

angular

angular-ngmodelchange

Angular 4 - ngModelChange throw 在两个 select 表单绑定期间无法读取未定义的属性 '...'