Angular 2 DropDown 组件问题

Question

实现下拉组件以根据SO question 绑定属性时出错，这是使用以下设置将下拉值 (selectItem) 绑定到 product.categoryId 的正确方法？：

.html

<div *ngIf="product">
    <h2>{{product.name}}</h2>
    <div>
        <label>Id: </label>{{product.productId}}
    </div>
    <div>
        <label>Name: </label>
        <input [(ngModel)]="product.name" placeholder="name" />
    </div>
    <div>
        <label>Price: </label>
        <input [(ngModel)]="product.price" placeholder="price" />
    </div>
    <div>
        <label>Image name: </label>
        <input [(ngModel)]="product.imageName" placeholder="imageName" />
    </div>
    <div>
        <label>Thumb image name: </label>
        <input [(ngModel)]="product.thumbImageName" placeholder="thumbImageName" />
    </div>
    <dropdown [values]="dropdownValues" (select)="action($event.value)"></dropdown>
    <div>
        <label>Category Id: </label>
        <!-->input [(ngModel)]="product.categoryId" placeholder="categoryId" /-->
    <!--Trying to bind this property with selectItem from DropdownComponent/-->
        {{product.categoryId}}
    </div>

    <button (click)="goBack()">Back</button>
    <button (click)="save()">Save</button>
</div>

浏览器错误

zone.js:388Unhandled Promise rejection: Template parse errors:
Can't bind to 'values' since it isn't a known property of 'dropdown'. ("             {{product.price}}
                {{product.categoryName}}
                <dropdown [ERROR ->][values]="dropdownValues" (select)="action($event.value)"></dropdown>
                {{product.thum"): ProductsApiComponent@8:26
'dropdown' is not a known element:
1. If 'dropdown' is an Angular component, then verify that it is part of this module.
2. If 'dropdown' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("
                {{product.price}}
                {{product.categoryName}}
                [ERROR ->]<dropdown [values]="dropdownValues" (select)="action($event.value)"></dropdown>
                {{pr"): ProductsApiComponent@8:16 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse errors:
Can't bind to 'values' since it isn't a known property of 'dropdown'. ("             {{product.price}}
                {{product.categoryName}}
                <dropdown [ERROR ->][values]="dropdownValues" (select)="action($event.value)"></dropdown>
                {{product.thum"): ProductsApiComponent@8:26
'dropdown' is not a known element:
1. If 'dropdown' is an Angular component, then verify that it is part of this module.
2. If 'dropdown' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("
                {{product.price}}
                {{product.categoryName}}
                [ERROR ->]<dropdown [values]="dropdownValues" (select)="action($event.value)"></dropdown>
                {{pr"): ProductsApiComponent@8:16
    at TemplateParser.parse (http://localhost:18678/dist/app.bundle.js:20029:19)
    at RuntimeCompiler._compileTemplate (http://localhost:18678/dist/app.bundle.js:43294:51)
    at http://localhost:18678/dist/app.bundle.js:43214:62
    at Set.forEach (native)
    at RuntimeCompiler._compileComponents (http://localhost:18678/dist/app.bundle.js:43214:19)
    at createResult (http://localhost:18678/dist/app.bundle.js:43110:19)
    at ZoneDelegate.invoke (http://localhost:18678/dist/app.bundle.js:92363:26)
    at Zone.run (http://localhost:18678/dist/app.bundle.js:92245:43)
    at http://localhost:18678/dist/app.bundle.js:92633:57
    at ZoneDelegate.invokeTask (http://localhost:18678/dist/app.bundle.js:92396:35)
    at Zone.runTask (http://localhost:18678/dist/app.bundle.js:92285:47)
    at drainMicroTaskQueue (http://localhost:18678/dist/app.bundle.js:92532:35)

Answer 1

您的问题可能是因为您没有将此组件导入到使用它的模块中。您收到的错误消息正是我忽略导入时收到的错误消息。