Property 'name' does not exist on type 'any[]' during ng build--aot

Question

I have 1 dropdown and 1 input field. Based the selection of dropdown, input field value is set.

So i used an array of type any(Array).

In my .ts file, i wrote like this

Services: Array<any>=[
    {name: 'Consultation', price: 100}, 
    {name: 'Follow Up', price: 200}, 
    {name: '24 Hrs. Creatinine', price: 300}, 
    {name: 'Complete Blood Count - CBC', price: 400}, 
    {name: 'X-Ray', price: 500}];

 selectedservice = this.Services;

And in HTML, I wrote likes this

<div class="col-sm-9">
                <nb-select type="number" fullWidth id="service" [(ngModel)]="selectedservice"
                  [ngModelOptions]="{standalone: true}" required>
                  <nb-option *ngFor="let service of Services" [value]="service">{{service.name}} </nb-option>
                </nb-select>
</div>
<div class="col-sm-9">
                <input type="number" nbInput fullWidth id="price1" [disabled]="true"
                  value="{{selectedservice.price}}" class="form-control" />

When I run build command, ng build --aot

I was getting this error

Property 'name' does not exist on type 'any[]'.

Property 'price' does not exist on type 'any[]'.

How to resolve this

You've only provided a small amount of code that has references to unknown things. It looks like something is calling `Services.name` and `Services.price`, but you've not included these — Kurt Hamilton, Mar 16 '20 at 09:18
selectedservice = this.Services; this varribale selectedservice is used for calling — Sravan Kumar, Mar 16 '20 at 09:20

score 1 · Accepted Answer · answered Mar 16 '20 at 09:29

When you want to use an object as the selected value, you should bind to [ngValue] in the <option> elements. Use [value] when the value is a string.

<div class="col-sm-9">
  <nb-select type="number" fullWidth id="service" 
      [(ngModel)]="selectedservice"
      [ngModelOptions]="{standalone: true}" required>
    <nb-option *ngFor="let service of Services" [ngValue]="service">
      {{service.name}} 
    </nb-option>
  </nb-select>
</div>

<div class="col-sm-9">
  <input *ngIf="selectedservice" type="number" nbInput fullWidth id="price1" [disabled]="true"
    value="{{selectedservice.price}}" class="form-control" />
</div>

It is also meaningless to initialise your selectedservice with the source array. You should set it to one of your options.

selectedservice = this.Services[0];

DEMO: https://stackblitz.com/edit/angular-rg8myc

Jasdeep Singh · Answer 2 · 2020-03-16T09:17:19.643

0

Always try to provide a valid data type and avoid using any. It would be better to create an interface and use it in your code.

interface ServiceInterface {
  name: string;
  price: number;
}

Use this interface in your code.

Services: ServiceInterface[] = [
        {name: 'Consultation', price: 100}, 
        {name: 'Follow Up', price: 200}, 
        {name: '24 Hrs. Creatinine', price: 300}, 
        {name: 'Complete Blood Count - CBC', price: 400}, 
        {name: 'X-Ray', price: 500}];

when you are using it inside *ngFor you want to access the properties of object, it means you are assuming it as object but in declaration you have created it as array of any data type. It is not able find any type information from it and giving you an error.

edited Mar 16 '20 at 09:17

answered Mar 16 '20 at 09:14

Jasdeep Singh

7,901
1
11
28

This doesn't answer the question though? – Kurt Hamilton Mar 16 '20 at 09:16
do i need to create ts file to define interface? – Sravan Kumar Mar 16 '20 at 09:22
You can create this interface in same file for now but it is good practice to have a separate file. – Jasdeep Singh Mar 16 '20 at 09:22

Property 'name' does not exist on type 'any[]' during ng build--aot

2 Answers2