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>

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

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

错误TypeError：无法读取未定义的属性“ avarageRating”

但是我正确地获得了该等级（一切显示正常）。

我的问题是，我做错了什么，我在Conosole中遇到了这些错误？

Answer 1

您的watchedProducts在avarageRating之前加载。可以更改加载数据的方式，以使avarageRating加载后可以观看产品。或直接添加* ngIf =“ ratings [i]”，使其更像

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

最好稍后再做，因为如果收视率的数量不等于watchedProducts的数量，它将解决问题。您将保护自己不受索引限制。

Answer 2

您正在遍历 watchedProducts 数组，并且基于此数组的索引希望从 ratings 数组中获取价值。现在可能存在任何情况，例如， watchProducts 具有比 rattings 数组更多的商品，在这种情况下，您将获得索引超出范围的异常或评分数组没有项目，在这种情况下，您将获得'cant'get undefined属性。因此，最佳实践是在获取 ratings 数组之前先确定其值。

您可以使用此代码修改代码{{rating [i] .avarageRating}}

      {{ GetAverageRatings(i) }}

在您的component.ts文件中，您可以编写如下函数

GetAverageRatings(index:number)
{
if(this.ratings[index])
{
return this.ratings[index];
}
}

谢谢。

Angular2 ngFor，存在时属性未定义

2 个答案: