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

Question

使用[(ngModel)] ，我设法设定基于所选择的下拉的输入值，但使用编译时我发现了一个错误 ng build --configuration=prod ， 误差示出的是

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

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

当我使用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;
      }

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已更新，但请注意您的引用。

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