Angular

Question

我有一个在服务中设置并在 ngOnInit() 中调用的项目列表：

async ngOnInit(){
   this.items = await this.service.getItems();
}

并且此列表是使用指令 *ngfor 呈现的。

但是，现在我需要在变量发生任何变化时刷新项目列表。所以我需要一个仅在某个变量（我们称之为 itemCategories）更改其值 lets.

时运行的事件

我怎样才能做到这一点？

Angular 版本是 12，我是新手

Answer 1

根据您的简短解释，这里有一个通用的解决方案：

将项目分配包装在一个方法中，并在设置 itemCategories 值时调用此方法。

async ngOnInit(){
   this.setItems();
}

setItems(){
   this.items = await this.service.getItems();
}

setItemCategories(value){
   this.itemCategories = value;
   this.setItems();
}

Answer 2

在 behaviorSubject 中填写你的数据然后订阅它，现在你的 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);
      }
    });
  }

祝你好运！

Answer 3

您可以使用 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
  }
}

Angular - 根据变量变化触发事件

Angular - trigger an event based on a variable change

event-handling