Angular 4 - * ng为条件为ngModel获取不同的值

Question

我是角度4的新手。我在使用HTML下拉选项和选项时遇到了问题。

我有类别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。

我在谷歌搜索很多时间，但我找不到任何解决方案。

这是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>

您必须在执行这些步骤后获得所需的结果