Question

使用[(ngModel)]，我设法根据选定的下拉列表设置了输入值，但在使用ng build --configuration=prod进行编译时，却遇到了错误，错误< / strong>显示为

类型“ any []”上不存在属性“名称”

类型“ any []”上不存在属性“值”

当我使用ng serve进行编译时，没有错误，这是我创建的stackblitz，到目前为止我已经尝试过，

打字稿文件：

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文件

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

如果我尝试添加界面并将其用作类型，则在ng build --configuration=prod上不会出现错误，但是在ng serve上会显示错误：


TypeError：无法读取未定义的属性“值”

由于我不知道如何解决此问题，因此我可以使用一些指导和建议。

Answer 1

这应该可以解决您的问题，而不是将selectedCard初始化为一个空的String，而是将其初始化为一个空的Object，希望对您有所帮助。

  selectedCard = {};

Answer 2

您是否尝试过使用接口并将其用作类型？

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

或者您是否尝试过类似的方法：

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

Answer 3

看起来selectedCard设置为undefined或”。因此，如果您可以将默认值分配给selectedCard，它可能是saveCreditCards的第一个元素，那么您就不会收到此错误。我不确定您是否可以这样做，但是可以：

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];

这应该可以解决问题。另一种方法是用* ngIf包裹您的html代码，

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

我认为这可能是更整洁的解决方案。在这种情况下，您不必指定默认值。

Answer 4

查看您的产品配置。您正在使用AOT

您可能想尝试“ ng serve --aot”进行测试

您会发现由于类型推断而为selectedCard设置了字符串类型。我认为stackblitz已更新，但请注意您的引用。

我绝对同意您使用的是打字稿，因此请使用接口并更明确地定义类型。您可以通过使用显式类型来避免此错误，这是TS的主要优点

属性“名称”在类型“任何[]”上不存在

4 个答案: