0

Error implementing a dropdown component to bind a property as per SO question which is the correct way to bind the dropdown value (selectItem) to product.categoryId with the following set up?:

.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>

Error browser

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)
1
  • yeah, it's correct. Commented Nov 27, 2016 at 20:30

1 Answer 1

0

Your problem can possibly be because you are not importing this component into the module where it is used. The error message you are getting is exactly the one that I got when I had neglected to import it.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.