Angular 4-* ngFor，條件為ngModel獲得不同的值

Question

我是angular 4的新手。使用HTML下拉select和option的 * ngFor遇到了問題。

我有類別array-object-

categories = [
{ id:1, title: 'c/c++'},
{ id:2, title: 'JavaScript'},
{ id:3, title: 'Angular'},
{ id:4, title: 'Node'}
];

我想在下拉列表中顯示標題，但我想在ngModel中獲取類別ID。

像-在HTML視圖中的下拉列表中顯示所有標題，但是當我選擇其中一個時，ngModel將獲得該類別ID。

即：我選擇JavaScript，ngModel將獲得JavaScript類別的ID。

我在Google上搜索了很多時間，但找不到任何解決方案。

這是HTML代碼-

  <label>Category</label>
  <select [(ngModel)]="post.category_id" class="form-control select2" style="width: 100%;">
      <option  *ngFor="let category of categories">{{ category.title}}</option>
   </select>

Answer 1

您可以綁定value屬性：

<option *ngFor="let category of categories" [value]="category.id">{{ category.title }}</option>

Answer 2

您將必須更新ngModel變量和option ，如下所示。

<select [(ngModel)]="category_id" class="form-control select2">
   <option *ngFor="let category of categories" [value]="category.id" 
           [innerHtml]=" category.title "></option>
</select>

在您的代碼post.category_id post將獲取id的值，然后post.category_id將給出undefined 。

Answer 3

經過各種嘗試找出您所犯的錯誤.....請先檢查以下幾點

• 首先要包含ngModel指令，您必須在app.ts中導入以下內容：

  import { FormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http'; 

• 導入這些后，您的@NgModule必須看起來像這樣

  @NgModule({ imports: [ BrowserModule,FormsModule, HttpModule ], declarations: [ App ], bootstrap: [ App ] }) 

• 之后，嘗試使用此代碼檢查所需結果

  <label>Category</label> <select [(ngModel)]="category_id" name="category_id" class="form-control select2" style="width:100%"> <option *ngFor="let category of categories" [value]="category.id">{{ category.title }}</option> </select> <h2>Select Category Id : {{category_id}}</h2> 

這些步驟后，您必須獲得所需的結果