2

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

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

代码的哪一部分不正确？

4

2 回答 2

2

就是target在undefined您的模板中。您可能想使用$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

于 2018-01-26T06:51:51.537 回答
0

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

<div *ngIf="books">              //added this condition
        <select [(ngModel)]="currentInput.book.id" name="bookTitle" 
                (ngModelChange)="setValue($event)">
</div>
setValue(model){
  this.selectedBook=model.target.value;
}
于 2018-01-26T05:49:17.807 回答