Question

我使用Angular 2 RC4和Typescript。我的问题是：当我点击所需对象的名称时，我想从对象数组中获取一个对象。我的代码是：

import { CategoryClass } from '../../category/class/category.class';
import { ComponentClass } from '../class/component.class';

@Component({
    templateUrl: './app/inventory/component/add/add.component.html'
})
export class AddComponent {
    private ClientData: ComponentClass = {
        ComponentId: 0,
        ComponentCategory: 0
    };
    private ServerCategorys: CategoryClass[] = [
        { CategoryId: 0, CategoryName: 'N/A', CategoryNote: 'N/A' }
    ];

    private getSingleCategory(_category: CategoryClass): void {
        this.ClientData.ComponentCategory = _category.CategoryId;
        console.log(this.ClientData.ComponentCategory);
    }
}

我的HTML代码是：

<div class="form-group row">
<label for="exampleSelect1" class="col-xs-2 col-form-label">Category</label>
<div class="col-xs-10">
    <select class="form-control" id="exampleSelect1">
        <option></option>
        <option *ngFor="let category of ServerCategorys" (click)="getSingleCategory(category)">{{category?.CategoryName}}</option>
    </select>
</div>

我观看了consol日志，但我没有看到ClientData.ComponentCategory值，我试图设置一个断点，当我到达它时应用程序永远不会停止。所以我想我从不调用getSingleCategory函数。有什么建议吗？提前谢谢。

Answer 1

请勿在{{1}}上使用(click)。

而是在<option>元素上设置(change)，以便在值发生变化时收到通知，并使用<select>轻松获取当前值：

[(ngModel)]="selectedValue"

Answer 2

选择选项时，您需要(change)个事件。

<option *ngFor="let category of ServerCategorys" (change)="getSingleCategory(category)">
    {{category?.CategoryName}}
</option>

ngFor和（click）事件Angular 2

2 个答案: