我有一個在服務中設定并在 ngOnInit() 中呼叫的專案串列：
async ngOnInit(){
this.items = await this.service.getItems();
}
這個串列是使用指令 *ngfor 呈現的。
但是，現在我需要在變數發生任何更改時重繪 專案串列。所以我需要一個事件，它只在某個變數（我們稱之為itemCategories）改變它的值時運行。
我怎樣才能做到這一點？
Angular 版本是 12，我是新手
uj5u.com熱心網友回復：
根據您的簡短解釋，這里是一個通用的解決方案：
將您的專案分配包裝在一個方法中，并在設定itemCategories值時呼叫此方法。
async ngOnInit(){
this.setItems();
}
setItems(){
this.items = await this.service.getItems();
}
setItemCategories(value){
this.itemCategories = value;
this.setItems();
}
uj5u.com熱心網友回復：
在behaviorSubject 中填寫您的資料然后訂閱它，現在您的behaviorSubject 方法將在您的資料發生更改時被呼叫，這是一個示例：
我像這樣宣告我的行為主題：
private _resetForm$ = new BehaviorSubject<boolean>(false);
public set setResetForm(resetStatus: boolean) {
this._resetForm$.next(resetStatus);
}
public get resetForm(): Observable<boolean> {
return this._resetForm$.asObservable();
}
然后我在這里改變它：
this.setResetForm = true;
現在我將從這里獲取事件，因為 setResetForm 已更改，因此我將從它獲取我的事件：
ngOnInit(): void {
this.resetForm.subscribe((res: boolean) => {
if (res) {
console.log(res);
}
});
}
祝你好運！
uj5u.com熱心網友回復：
您可以使用EventEmitter和@Output()來實作您的目標。
下拉選單組件：
import { Component, Output, EventEmitter, NgModule } from '@angular/core';
@Component({
selector: 'app-dropdown',
template: `
<div>
<select [(ngModel)]="selected" (ngModelChange)="onChange($event)">
<option *ngFor="let category of categories" [value]="category">{{category}}</option>
</select>
</div>`
})
export class DropdownComponent {
@Output() selectedCategory: EventEmitter<string> = new EventEmitter<string>();
categories = ["All categories", "A", "B", "C"]; //your categories list
selected: string = "All categories"; //default value
constructor() {
}
onChange(newvalue): void {
this.selectedCategory.emit(newvalue);
}
}
這是另一個組件，只要它從下拉組件中更改，就會接收選定的值
import {Component, NgModule} from '@angular/core'
@Component({
selector: 'app-main',
template: `
<div>
<app-dropdown (selectedCategory)='onChange($event)'></app-dropdown>
</div>
`,
})
export class MainComponent {
selected: string;
constructor() {
}
onChange(category):void {
this.selected = category;
//get your items list based on the selected category
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/387503.html