通过管道设置类绑定类

Question

通过我编写的自定义管道设置类时遇到问题。

我使用映射的信号存储来检查该值是否与存储中的 id 匹配，如果条件为真，则如果为真则返回一个类，如果不是则返回不同的类。

店铺：

const initialState: LightboxState = {
  isActive: [
    { id: 'singleSided', status: false },
    { id: 'doubleSided', status: false },
    { id: 'illuminated', status: false },
    { id: 'notIlluminated', status: false },
    { id: 'standing', status: false },
    { id: 'hanging', status: false },
  ],

管道：

@Pipe({
  name: 'setClass',
  standalone: true,
  pure: false,
})

export class setClassPipe implements PipeTransform {
  private store = inject(LightboxStore);

  transform(value: string) {
    this.store.isActive().map((id) => {
      console.log(id.id);
      if (value === id.id && id.status === true) {
        console.log(id.status);
        return 'btn-active';
      }
      console.log(id.status);
      return 'btn-not-active';
    });
  }
}

模板：

<button
  type="button"
  class="shadow"
  (click)="changeStatus('singleSided', 'doubleSided')"
  [class]="'singleSided' | setClass"
>
  JEDNOSTRONNY
</button>

该函数可以正确读取值、id.id 和 id.status，但不会为按钮设置任何类型的类，即使最初它是

false

Answer 1

看来我没有正确返回值。

这可以正常工作：

  helper = '';

  transform(value: string) {

    this.store.isActive().map((id) => {
      if (value === id.id && id.status) this.helper = 'btn-active';
      if (value === id.id && !id.status) this.helper = 'btn-not-active';
    });
    return this.helper;
  }