一次显示多个切换

Question

在我的 component.ts 中，这是切换开关的逻辑。目前一次只能显示一个开关。我希望一次可以显示多个内容。

public selectedSwitch: string = ‘’

public onReveal(event: Event, title: string): void {
    if ((event as CustomEvent).detail) {
      this.selectedSwitch = title;
    } else {
      this.selectedSwitch = '';
    }
  }

在 html 中，我正在检查它是否已选中以及是否已更改

onReveal($event, item.title) is called

Answer 1

您的事件应该位于像这样的数组中，也不应该将空白字符作为字符串返回，您应该为 null。看来您有一系列自定义事件来打开所谓的开关。

如果您不知道如何填充数组，我添加了一个名为 setEventArray 的异步方法。另外我还把你的第一个方法变成了Promise。

https://www.freecodecamp.org/news/javascript-promises-for-beginners/#:~:text=You%20典型地%20use%20a%20promise,a%20file%20from%20their%20computer.

为什么我们需要JS中的Promise

https://venuvudu.medium.com/angular-promise-understanding-and-implementation-26c4ab22e254

返回未转义或空白字符实际上也不是制造商的最佳实践。相反，应该使用 null 或 undefined。

我希望这对您有帮助 - 您现在应该能够修改它以按照您的意愿进行。只需记住将事件推送到数组或地图即可。

https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#null-and-undefined

public selectedSwitch!: string | null; 
private customEventsArray:any[]=[]
async onReveal(event:[], title: string): Promise<void> {
  await this.setEventArray(this.customEventsArray)
    this.customEventsArray.forEach((event)=>{
      if ((event as CustomEvent).detail) {
        this.selectedSwitch = title;
      } else {
        this.selectedSwitch = null;
      }
    })
  
  }
  async setEventArray(events:any[]){
    events.forEach((event)=>{
      this.customEventsArray.push(event)
    })
  }