Angular2 ngFor，存在时属性未定义

Question

我正在处理问题。我的其中一个属性在定义时显示为“未定义”，但我找不到解决方案:

我有包含数据的父组件:

    @Component({
      selector: "app-my-products",
      templateUrl: "./my-products.component.html",
      styleUrls: ["./my-products.component.css"]
    })
    export class MyProductsComponent implements OnInit {
      watched: WatchedProduct[] = [];
      products: Product[] = [];
      watchedProducts: Product[] = [];
      ratings: ProductAvarageRating[] = [];
//then, i get data. It works fine

在 Parent.Component.html 中，我用数据调用了两个子组件:

<div>
        <app-my-products-ratings
              [watchedProducts]="watchedProducts"
              [ratings]="ratings"
            ></app-my-products-ratings>

            <app-my-products-watched
              [watchedProducts]="watchedProducts"
            ></app-my-products-watched>
</div>

MyProductsWatched.component.ts 看起来像这样:

@Component({
  selector: "app-my-products-watched",
  templateUrl: "./my-products-watched.component.html",
  styleUrls: ["./my-products-watched.component.css"]
 })
export class MyProductsWatchedComponent implements OnInit {
  products: Product[] = [];
  watched: WatchedProduct[] = [];
  selectedProduct = new Product();
  @Input() watchedProducts: WatchedProduct[] = []; //data from Parent here

还有他的 html:

<mat-list-item *ngFor="let product of watchedProducts">
    <button mat-button>{{ product.name }}</button>
</mat-list-item>

它工作正常。但是在 MyProductRatings.component.html 中我得到一个错误，ratings 中的一个属性未定义。

MyProductRatings 的组件:

@Component({
  selector: "app-my-products-ratings",
  templateUrl: "./my-products-ratings.component.html",
  styleUrls: ["./my-products-ratings.component.css"]
 })
export class MyProductsRatingsComponent implements OnInit {
   @Input() watchedProducts: WatchedProduct[] = [];
   @Input() ratings: ProductAvarageRating[] = []; //data from parent here

HTML:

<div>
  <mat-selection-list>
    <mat-list-item
      *ngFor="
        let product of (watchedProducts | search: searchText);
        let i = index
      "
    >
      <button mat-button>{{ watchedProducts[i].name }}</button>
      {{ ratings[i].avarageRating }}
    </mat-list-item>
  </mat-selection-list>
</div>

我想做的是根据 *ngFor 中的 index 从 ratings 中获取名为 avarageRating 的属性> 循环。

例如，现在我在 watchedProducts 中有 2 个项目。我在 MyProductRatings.component.html 的 html 中得到的错误是:

ERROR TypeError: Cannot read property 'avarageRating' of undefined

但我正确地得到了那个评级(一切都显示正常)。

我的问题是，我做错了什么，我的控制台出现了错误？

Answer 1

您的 watchedProducts 在 avarageRating 之前加载。要么更改您加载数据的方式，以便 avarageRating 加载然后 watchedProducts。或者简单地添加一个 *ngIf="ratings[i]"所以它更像

<span> *ngIf="ratings[i]">{{ ratings[i].avarageRating }} </span>

最好稍后再做，因为它可以解决评分数不等于观看产品数的问题。您将保护自己免受索引越界的影响。