angular - 组件生命周期

Question

还有一个问题，我不知道该怎么办。我认为问题出在组件的生命周期上，但不知道如何解决它。

文章列表.components.ts

export class ArticlesListComponent implements OnInit {
  constructor(private articleService: ArticleService) {
  }

  @Input() articlesList;

  articleInfo: IArticleInfoArray;
  articlesTitles: string[];
  allArticlesInfo: any[] = [];
  averageLength: number;

  static getUrlInfo(searchQuery: string) {
    return 'https://ru.wikipedia.org/w/api.php?action=query&titles='
      + searchQuery + '&prop=info&format=json&origin=*';
  }

  ngOnInit() {
  }

  getArticlesTitle() {
    this.articlesTitles = this.articlesList[1];
  }

  getArticlesInfo() {
    for (const title of this.articlesTitles) {
      this.articleService.getArticlesInfo(ArticlesListComponent.getUrlInfo(title))
        .subscribe(
          (data: IArticleInfo) => {
            this.articleInfo = {
              ...data,
              query: {
                pages: [Object.values(data.query.pages)[0]]
              }
            };
            this.allArticlesInfo.push([this.articleInfo.query.pages[0].touched, this.articleInfo.query.pages[0].length]);
          }
        );
    }
  }

  getAverageLength() {
    let sum = 0;

    for (const length of this.allArticlesInfo) {
      sum += length[1];
    }

    this.averageLength = sum / this.allArticlesInfo.length;
  }
}

文章-list.component.html

<div class="articles-list pt-2" *ngIf="articlesList">
  <div class="ml-2">
    <h4>По запросу <small class="text-muted query">"{{ articlesList[0] }}"</small>
      найдены статьи:</h4>
    <h6>Количество найденных статей: {{ articlesList[1].length }}</h6>
  </div>
  <div class="articles-list__block" *ngFor="let article of articlesList[1]; let i = index">
    <div *ngFor="let link of articlesList[3]; let k = index" [hidden]="i != k">
      <a class="articles-list__link" [attr.href]="link">{{ article }}</a>
    </div>
    <div class="articles-list__description mt-2 mb-2" *ngFor="let description of articlesList[2]; let j = index" [hidden]="i != j">
      <div *ngIf="description !== ''; else missingSnippet">{{ description }}</div>
      <ng-template #missingSnippet>Краткое описание отсутствует</ng-template>
    </div>
  </div>
</div>

<div *ngIf="articlesList">
  <button type="button" class="btn btn-info btn-sm"
    (click)="getArticlesTitle(); getArticlesInfo(); getAverageLength()">Дополнительная информация</button>
  <ng-container *ngIf="averageLength">
    {{ averageLength }}
  </ng-container>
</div>

问题是该值averageLength仅在按下第二个按钮后出现。

我尝试getArticlesTitle(); getArticlesInfo();在方法中使用函数ngOnInit，但是会出现错误Cannot read property '1' of undefined

我该怎么办？组件初始化后如何立即获取值averageLength？

标签： angulartypescriptlifecycle

Answer 1

因此，在 ngOnInit() 中调用这些函数。

export class ArticlesListComponent implements OnInit {
  constructor(private articleService: ArticleService) {
  }

  @Input() articlesList;

  articleInfo: IArticleInfoArray;
  articlesTitles: string[];
  allArticlesInfo: any[] = [];
  averageLength = 0;

  static getUrlInfo(searchQuery: string) {
    return 'https://ru.wikipedia.org/w/api.php?action=query&titles='
      + searchQuery + '&prop=info&format=json&origin=*';
  }

  ngOnInit() {
    this.getArticlesTitle();
    this.getArticlesInfo();
  }

  getArticlesTitle() {
    this.articlesTitles = this.articlesList[1];
  }

  getArticlesInfo() {
    for (const title of this.articlesTitles) {
      this.articleService.getArticlesInfo(ArticlesListComponent.getUrlInfo(title))
        .subscribe(
          (data: IArticleInfo) => {
            this.articleInfo = {
              ...data,
              query: {
                pages: [Object.values(data.query.pages)[0]]
              }
            };
            this.allArticlesInfo.push([this.articleInfo.query.pages[0].touched, this.articleInfo.query.pages[0].length]);debugger;
            this.calculateAvaerage();
          }
        );
    }
  }

  calculateAvaerage(){
    let sum = 0;
    for (const length of this.allArticlesInfo) {
      debugger;
      sum += length[1];
    }

    this.averageLength = sum / this.allArticlesInfo.length;
  }
}

但是在getArticlesTitle()您尝试访问的内部方法中this.articlesList[1]。这个会抛出一个错误，因为 this.articlesList 在 undefined 因为数据还没有填充。

要解决此问题，您需要稍微更新搜索组件。

添加*NgIf搜索组件html的html，并将articles初始化为一个空数组，这样我们就可以使用length属性来判断是否加载该app-article-list组件。

所以，用 -更新search.component.ts

articles: any[] = [];

和search.component.html与 -

<app-articles-list  *ngIf="articles.length > 0" [articlesList]="articles">
</app-articles-list>

因此，app-article-list当文章中有一些项目时，组件将加载。

这是更新的堆栈闪电战