新しい製品が到着してもテーブルが更新されない結果を確認するにはリロードする必要がありますが、それは私が望んでいることではありません。私の期待する結果：新しい製品がバックエンドからフロントエンドに追加されたときにテーブルを更新する必要がある場合、これは私のコードです：
Product.service.ts
getProducts(): Observable<Products[]> {
return this.http.get<Products[]>(this.BASE_URL);
}
Admin-products.component.ts
ngOnInit(): void {
this.productService.getProducts().subscribe((data) => {
this.listOfData = data;
console.log("data", data);
});
}
Admin-products.component.html
<nz-table
#sortTable
[nzData]="listOfData"
nzTableLayout="fixed"
nzShowPagination
nzShowSizeChanger
>
<thead>
<tr>
<th *ngFor="let column of listOfColumn">{{ column.title }}</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of sortTable.data">
<td>{{ data.name }}</td>
<td>{{ data.price }}</td>
<td>{{ data.type }}</td>
<td>{{ data.category }}</td>
<td>{{ data.subCategory }}</td>
<td>{{ data.amount }}</td>
</tr>
</tbody>
</nz-table>
ここで何が欠けているのかわかりません。おそらく問題はnodejsのサーバーであり、これはサーバーの応答です。
Nodejsサーバー
router.get("/products", (req, res) => {
mysqlConnection.query("SELECT * FROM products", (err, rows, fields) => {
if (!err) {
res.json(rows);
} else {
console.log(err);
}
});
});
何か案が？
あなたはObersvablesを誤解しています。これらは期待どおりにここで機能し、リクエストが完了するとイベントを発生させるため、データがテーブルに表示されます。ただし、常に最初にリクエストを行う必要があります。新しいデータを「サーバーに要求する」必要があります。
新製品が追加されたことをどのように知る必要がありますか？サーバーはクライアントに「新しいアイテムがあります。送ってください」とは伝えません。
あなたができることは：
setInterval関数を使用してX秒ごとに新しいリクエストを作成し、新製品も取得します最後のものはもう少し作業が必要です。
最も簡単な方法はsetInterval、更新ボタンを使用または作成することです。setIntervalの例を示します。
myInterval; //You need this to clear it later
...
ngOnInit(): void {
this.myInterval = setInterval(() => {
this.productService.getProducts().subscribe(data=> {
this.listOfData = data;
console.log('data', data);
});
}, 60000)
}
ngOnDestroy() {
clearInterval(myInterval)
}
コンポーネントがアクティブである限り、60秒ごとに新しいデータを要求します。コンポーネントが破棄される間隔をクリアするには、OnDestroyを実装する必要があります。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加