角度2輸入數據列表自動完成

Question

const books: Array<{ id: number, title: string }> = [{id: 1, title: "book1"}, {id: 2, title: "book2"}, {id: 3, title: "book3"}, {id: 4, title: "book4"}];

<form [formGroup]="bookForm" novalidate (ngSubmit)="save(bookForm)">
    <div class="form-group">
        <label>book_id</label>
        <input list="book_list" formControlName="book_id">
        <datalist id="book_list">
            <option *ngFor="let book of books" [ngValue]="book.id">{{book.title}}</option>
        </datalist>{{ bookForm.value | json }}
        <!--display error message if book_id is not valid-->
        <small [hidden]="bookForm.controls.book_id.valid">
          book not selected</small>
    </div>
</form>

我正在嘗試使用輸入數據列表執行自動完成輸入字段。 在這里，我要允許按書名進行搜索，但是要在角度2中選擇一本書后就獲取書ID。

1. 但是我正在獲取書名而不是書號。
2. 在編輯模式下，如何在輸入框中將書名和書ID映射到輸入框中。

Answer 1

應該是[value]而不是[ngvalue]

在組件中，您可以如下提取：

save(form) {
    console.log(form.book_id.value);
}