Angular 组件生命周期
还有一个问题,我不知道该怎么办。 我认为问题在于组件的生命周期,但不知道如何解决它 文章列表.组件.tsAngular 组件生命周期,angular,typescript,lifecycle,Angular,Typescript,Lifecycle,还有一个问题,我不知道该怎么办。 我认为问题在于组件的生命周期,但不知道如何解决它 文章列表.组件.ts export class ArticlesListComponent implements OnInit { constructor(private articleService: ArticleService) { } @Input() articlesList; articleInfo: IArticleInfoArray; articlesTitles: str
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;
}
}
文章列表.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>
ПзззПзПбб{{articlesList[0]}”
найдены статьи:
ааааааааа:{{articlesList[1]。长度}
{{description}}
Краткое описание отсутствует
Дополнительная информация
{{averageLength}}
问题是值averageLength
仅在按下第二个按钮后出现
我尝试使用函数getArticlesTitle();getArticlesInfo()方法ngOnInit
中的code>,但会出现错误无法读取未定义的属性“1”
我该怎么办?如何在初始化组件时立即获取值averageLength
?因此,在ngOnInit()中调用这些函数
但是在这里,在getArticlesTitle()
方法中,您试图访问this.articlesList[1]
。由于数据尚未填充,This.articlesList处于未定义状态,因此此操作将引发错误
要解决这个问题,您需要稍微更新一下搜索组件
在搜索组件html的html中添加*NgIf
,并将文章初始化为空数组,以便我们可以使用length属性确定是否加载应用程序文章列表
组件
因此,使用-
articles: any[] = [];
<app-articles-list *ngIf="articles.length > 0" [articlesList]="articles">
</app-articles-list>
和search.component.html,并使用-
articles: any[] = [];
<app-articles-list *ngIf="articles.length > 0" [articlesList]="articles">
</app-articles-list>
因为您在单击按钮时就可以完成所有操作。您正在调用函数,然后数据就会出现并分配给变量。在调用函数getAverageLength()之前,averageLength是未定义的。此外,this.articlesTitles=this.articlesList[1]。您正试图访问列表中的某个项目,但列表中没有任何项目。因此,索引1中的值为undefined@SadidKhan如何修复它?重建界面?这个按钮有什么用?你想要什么?你能创建一个stackblitz这样其他人就可以很容易地发现什么是错误的吗?这个按钮是做什么的?单击按钮后是否要从服务器获取数据?@SadidKhan我想在按下按钮后显示变量averageLength
@SadidKhan的值