Question

我正在尝试在我的App中使用演示组件和容器组件，但是有时我觉得我的演示组件确实需要与服务进行通信才能正确显示数据。例如，我有一个数据数组。

 let  frameworks = [
        {  name: 'Angular', selected: true, category: 'js' },
        {  name: 'React', selected: true, category: 'js' },
        { name: 'Zend', selected: true, category: 'php' },
        { name: 'CakePHP', selected: false, category: 'php' },
      ];

我需要为上述数据创建一种快速选项组件，以便用户可以查看是否选择了所有javascript框架。或者他们可以打开/关闭特定类别。这是我的演示性快速选择组件

@Component({
  selector: 'quick-options',
  template: `
  <ul>
    <li *ngFor="let option of options">
        <span class="switch" [ngClass]="{'on': isSwitchOn(option)}"></span>
    {{  option.name }}
  </li>
</ul>
  `,
})
export class QuickOptionsComponent {
  @Input() options;
  @Input() frameworks: any[];
  isSwitchOn(item) {
    return this.frameworks.filter(x => x.category === item.category).every(x => x.selected);
  }
}

但是正如您所看到的，我正在isSwitchOn方法内进行一些逻辑以确定是否选择了特定类别的所有项目，因此我可以将“ on”类分配给切换按钮。我只是想知道这是否正确，或者是否有更好的方法来获取类别状态。

Here's the full code

如何在演示文稿和容器组件中使用ngClass

0 个答案: