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

【问题标题】：Property 'name' does not exist on type 'any[]'类型“任何 []”上不存在属性“名称”
【发布时间】：2019-08-25 15:25:00
【问题描述】：

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

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

类型“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: 无法读取未定义的属性“值”

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

【问题讨论】：

您应该始终创建一个类及其对象，以便更好地进行编码练习。因为any 类型的对象意味着任何东西，只是任何东西。
我在显示的代码中没有看到 cardHolder。它在哪里？
@ShravilPotdar 即使我创建了类我仍然在 ng serve 上遇到错误
@PankajShukla 明白了，我的错，应该是“价值”
您的问题现在解决了吗？

标签： angular typescript compiler-errors production angular-aot

【解决方案1】：

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

  selectedCard = {};

【讨论】：

【解决方案2】：

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

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

或者你有没有尝试过类似的方法：

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

【讨论】：

在您的 stackblitz 中，您没有使用属性“cardHolder”。您是否复制/粘贴了所有代码？
我尝试了本地化，我创建了一个界面并输入：selectedCard: Card = { id = '', viewValue = '', name = '', value = '' };。（ps：我在value: string 的界面中忘记了一个;）并且我没有错误。

【解决方案3】：

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

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>

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

【讨论】：

我尝试了第一个建议，AOT 和 ng 服务没有错误，但输入值会自动更新，无需触发并选择下拉菜单
你能在 stackblitz 中展示它吗？您是否将 savedCreditCards 的第一个元素分配给 selectedCard？如果是这样，您可以删除它。
我更新了stackblitz.com/edit/angular-xsuxey，我可以在 ngOninit 上实现 this.selectedCard = [] 来删除它，或者你有更好的解决方案？
@hafizi 您是否尝试过我使用 *ngIf 包装到 div 中的解决方案？试试这个分叉的堆栈闪电战：- stackblitz.com/edit/angular-9ojfhm?file=src/app/…
@hafizi 出了什么问题？

【解决方案4】：

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

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

您会发现由于类型推断，您为 selectedCard 设置了字符串类型。我认为 stackblitz 已经更新，但请注意您的参考资料。

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

【讨论】：