これはAngular6とFirestoreプロジェクトです。の各ドキュメントを繰り返して更新しようとしていarticlesCollectionます。クリックイベントは、ループを実行するメソッドをトリガーします。問題は、メソッドがコレクションを1回だけループする場合があることです。また、無限にループすることもあります。私の方法に問題はありますか？コレクション内の各ドキュメントをループして更新するためのより良い方法はありますか？
編集：localhost：4200をハードリロードすると、メソッドを最初にトリガーしたときに、1回ループします。メソッドをもう一度トリガーすると、無限にループします。
featureArticle(article) {
const articleArray = this.articlesCollection.snapshotChanges();
articleArray.subscribe( payload => {
payload.forEach( item => {
const ID = article.id;
const articleID = item.payload.doc.data().id;
const articleTITLE = item.payload.doc.data().title;
const articleToUpdate = this.articlesCollection.doc(`${articleID}`);
if (ID === articleID) {
articleToUpdate.update({
isFeature: true
});
} else {
articleToUpdate.update({
isFeature: false
});
}
alert(`${articleTITLE} updated`); <-- LOOPS INFINITELY
});
});
}
テンプレート：
<ng-container *ngFor="let article of articles | async">
<div (click)="featureArticle(article)">
{{ article.title }}
</div>
</ng-container>
さて、ここでの私の修正IDs = []は、コンポーネントに空の変数を作成することでした。コンストラクターで、articlesCollectionwithをループし、snapshotChanges().foreach()すべてのドキュメント（記事）IDを配列にプッシュしました。featureArticle(article)次に、私のメソッドはIDs配列をループして、article.idそれぞれと比較することができますID。一致した場合はXを実行しました。一致しなかった場合はYを実行しました。
これのポイントは、特定のArticleのisFeature?プロパティをにtrue設定すると同時に、他のすべてのArticlesisFeature?プロパティをに設定するメソッドを作成することfalseでした。
export class AdminArticleListComponent {
articlesCollection: AngularFirestoreCollection<Article>;
IDs: Array<any> = [];
constructor( stuff here ) {
this.articlesCollection = this.afs.collection('articles');
this.articlesCollection.snapshotChanges().forEach( a => {
a.forEach( item => {
const id = item.payload.doc.data().id;
this.IDs.push(id);
});
});
}
featureArticle(article) {
for (let id of this.IDs) {
const document = this.articlesCollection.doc(`${id}`);
const articleID = article.id;
if (id === articleID) {
document.update({
isFeature: true
});
} else if (id !== articleID) {
document.update({
isFeature: false
});
} else {
console.log('Error updating feature Article');
}
}
}
}
そしてテンプレート：
<ng-container *ngFor="let article of articles | async">
<tr>
... other cells ..
<td class="featureCell" (click)="featureArticle(article)">
<ng-container *ngIf="article.isFeature">
<span class="greenCheckmark">✅</span>
</ng-container>
<ng-container *ngIf="!article.isFeature">
<span >✅</span>
</ng-container>
</td>
</tr>
</ng-container>
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加