属性'name'在类型 'any[]' 上不存在

Question

使用[(ngModel)]，我设法根据选定的下拉列表设置了一个输入值，但在使用ng build --configuration=prod进行编译时出现错误，显示的错误是

属性"name"在

类型"any[]"上不存在

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

当我使用ng serve编译时，没有错误，这是我创建的堆栈闪电战以及我到目前为止尝试过的内容，

打字稿文件：

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

网页文件

<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错误是：

类型错误： 无法读取未定义的属性"值">

我可以使用一些指导和建议，因为我无法弄清楚如何解决这个问题。

Answer 1

与其将selectedCard 初始化为空字符串，不如将其初始化为空对象，这应该可以解决您的问题，我希望这有所帮助。

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设置为未定义或"。因此，如果您可以将默认值分配给selectedCard这可能是savedCashCards的第一个元素，那么您不应该收到此错误。我不确定您是否可以这样做，但如果可以，请这样做：

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 设置了字符串类型。我认为堆栈闪电战已更新，但请小心您的参考资料。

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