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

Question

Using [(ngModel)], I managed to set an inputs value based on a selected dropdown but I'm getting an error when compiling using ng build --configuration=prod, error shown is

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

Property 'value' does not exist on type 'any[]'

when I compiled using ng serve, there was no error, Here is a stackblitz I created and what I have tried so far,

Typescript file:

  savedCards = [];
  selectedCard = '';

      selectDropdownCard(card) {
        this.savedCards.find((item) => item.id === card.id) ?
          this.savedCards = this.savedCards.filter((item) => item.id === card.id) :
          this.savedCards = [card];
        this.show = false;
        this.hasSelected = true;
        this.selectedCard = card;
      }

HTML file

<div class="div1" (click)="selectSavedCard()" [(ngModel)]="selectedCard" ngDefaultControl>
  <div *ngIf='!hasSelected'>
    <div>
      <p>dropdown</p>
    </div>
  </div>
  <div *ngFor="let card of savedCards">
    <div>
      <p>{{card.viewValue}}</p>
    </div>
  </div>
</div>

<div class="div2" *ngIf="show">
  <div *ngFor="let card of savedCreditCards" (click)="selectDropdownCard(card)">
    <div>
      <p>{{card.viewValue}}</p>
    </div>
  </div>
</div>

<input placeholder="id" [(ngModel)]="selectedCard.id" type="text">
<input placeholder="viewValue" [(ngModel)]="selectedCard.viewValue" type="text">
<input placeholder="name" [(ngModel)]="selectedCard.name" type="text">
<input placeholder="value" [(ngModel)]="selectedCard.value" type="text">

if I try added interface and use it as type, on ng build --configuration=prod I got no error, but on ng serve error shown are:

TypeError: Cannot read property 'value' of undefined

I could use some guidance and suggestions since I could not figure out how to solve this.

You should always create a class and its object for a better coding practice. Since object of type `any` means anything, just anything. — ngShravil.py, Aug 25 '19 at 16:28
@ShravilPotdar even I had create class I still got error on ng serve — hafizi hamid, Aug 25 '19 at 16:32

score 0 · Answer 1 · answered Aug 25 '19 at 16:05

0

Instead of initializing selectedCard as an empty String, Initialize it as an empty Object, that should solve your problem, I hope this helps.

  selectedCard = {};

answered Aug 25 '19 at 16:05

Hamza

469
3
9

Nicolas T. · Answer 2 · 2019-08-25T17:02:49.253

0

Have you tried to use an interface and use it as a type ?

interface Card {
    id: string;
    viewValue: string;
    name: string;
    value: string;
}
...
selectedCard: Card = { id = '', viewValue = '', name = '', value = '' };

Or have you tried something like that :

selectedCard = { id = '', viewValue = '', name = '', value = '' };

edited Aug 25 '19 at 17:02

answered Aug 25 '19 at 16:18

Nicolas T.

36
2

In your stackblitz, your are not using a property 'cardHolder'. Did you copy/paste all your code ? – Nicolas T. Aug 25 '19 at 16:35
I tried localy, i create an interface and put that : `selectedCard: Card = { id = '', viewValue = '', name = '', value = '' };`. (p.s: I forgot one `;` in the interface at `value: string`) and I have no **error**. – Nicolas T. Aug 25 '19 at 17:01

Pankaj Shukla · Answer 3 · 2019-08-25T17:07:44.823

0

Looks like selectedCard is set to undefined or ''. So if you can assign the default value to selectedCard which could be first element of savedCreditCards then you should not get this error. I am not sure if that is possible for you to do but if it is then do:

savedCards = [];
  show = false;
  hasSelected: boolean;
  savedCreditCards: Card[] = [
    { id: '001', viewValue: 'Dropdown1', name: 'A' , value:'1' },
    { id: '002', viewValue: 'Dropdown2', name: 'B' , value:'2' },
    { id: '003', viewValue: 'Dropdown3', name: 'C' , value:'3' },
    { id: '004', viewValue: 'Dropdown4', name: 'D' , value:'4' },
  ];
  selectedCard = this.savedCreditCards[0];

This should resolve the problem. Another way could be to wrap your html code with *ngIf like this:

<div *ngIf="selectedCard">
    <input placeholder="id" [(ngModel)]="selectedCard.id" type="text">
    <input placeholder="viewValue" [(ngModel)]="selectedCard.viewValue" type="text">
    <input placeholder="name" [(ngModel)]="selectedCard.name" type="text">
    <input placeholder="value" [(ngModel)]="selectedCard.value" type="text">
</div>

This I think might be neater solution. In this case you don't have to assign a default value.

edited Aug 25 '19 at 17:07

answered Aug 25 '19 at 17:02

Pankaj Shukla

2,657
2
11
18

I try first suggestion, no error on AOT and ng serve, but inputs value are automatically update without trigger and select dropdown – hafizi hamid Aug 25 '19 at 17:39
Can you show that in stackblitz? Are you assigning the first element of savedCreditCards to selectedCard? If so, you can remove that. – Pankaj Shukla Aug 25 '19 at 17:48
my updated https://stackblitz.com/edit/angular-xsuxey, I can implement this.selectedCard = [] on ngOninit to remove it or you have better solutions ? – hafizi hamid Aug 25 '19 at 17:54
@hafizi did you try my solution of wrapping into a div using *ngIf? Try this forked stackblitz:- https://stackblitz.com/edit/angular-9ojfhm?file=src/app/app.component.ts – Pankaj Shukla Aug 25 '19 at 18:08
@hafizi What was the problem? – Pankaj Shukla Aug 25 '19 at 18:17
because I want to show default input value, for my use case I need to show it – hafizi hamid Aug 25 '19 at 18:25
@hafizi Can you try the link. I updated it now. https://stackblitz.com/edit/angular-9ojfhm?file=src/app/app.component.ts – Pankaj Shukla Aug 25 '19 at 18:33

score 0 · Answer 4 · answered Aug 25 '19 at 17:29

Look at your prod configuration. You are using AOT

You might want to try "ng serve --aot" for testing

You would find that you set a string type for selectedCard due to type inference. I think the stackblitz has been updated, but be careful with your references.

I definitely agree that you are using typescript, so use an interface and get the types more explicitly defined. You could have avoided this error by using explicit types, which is the main advantage of TS

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

4 Answers4