Javascript 如何将的决策与观察者和同步操作混合使用？（角度）

我的项目中有六个方形视图，我必须选择单击它们的选项：

点击其中一个，它会被选中，上面会有一些css淡入淡出的颜色，以显示它的选中状态。这已经奏效了

选择其中的两个，并使用相同的css淡入颜色来显示选中的方块。这在某种程度上是可行的，但却与其他东西相混淆

因此，为了识别im处于哪种模式，我有一个收音机按钮来调用多个选择模式

这就是代码：

这是我的方形组件html文件

  <div *ngIf="oneChoosed" layout="row" layout-align="center center" class="one-chose">
  </div>


  <div *ngIf="multipleChoosed" layout="row" layout-align="center center" class="omult-chose">
  </div>

这是我从主屏幕组件html文件更新的输入：

[oneChoosed]="isOneChoosed(squares)"
[multipleChoosed]="isMultipleChoosed(squares)"

在主屏幕组件类中，我得到了点击事件和方块的id，它看起来像这样：

export class mainScreenComp implements OnInit, OnDestroy {

  multipleSelectionMode: Observable<boolean>;
  oneChoosenIds: string[];
  multipleChosenIds: string[];
  _oneChoseSquareIdsSubscription: Subscription;
  _multipleChoseSquaresIdsSubscription: Subscription;

  ngOnInit() {
    this.multipleSelectionMode = this.brainComp.curSelectionTyp.map(selecType => selecType === SelectionType.multiple);
this._oneChoseSquareIdsSubscription = this.brainComp.choosingOption.subscribe(
  (chos: ChoosingOption) => {
    switch (chos.option) {
      case ChoosingOption.oneChose:
        this.oneChoosenIds = chos.chosedIds.squares;
        break;
      case ChoosingOption.finishedOneSel:
        this.oneChoosenIds = undefined;
        break;
    }
  }
);


this._multipleChoseSquaresIdsSubscription = this.brainComp.choosingOption.subscribe(
  (chos: Chosed) => {
    this.multipleChosenIds = chos.squares;
  }
);

基本上，我将方块id添加到数组OneChooseId和MultipleChooseId中，检查它们是否为空，以决定返回什么

这是可行的，但是，当我在一个我可以选择的状态时 只选择一个，当我点击它时，我看到两个css方形封面，显示该正方形被选中…因为它们有不同的设计，我可以注意到

---

这意味着这个*ngIf=“oneChoosed”和这个*ngIf=“multipleChoosed”都返回true…所以我想在_multipleechoseSquaresidSubscription订阅中对我的observer

multipleSelectMode

添加额外的条件，但这是异步的，因为它是一个observer，其他操作是同步的，所以它不能正常工作。你有什么建议让我解决它吗

我不知道答案，但如果你想让问题的核心部分更加突出，其他人就更有可能插嘴。如果问题是关于“如何从两个可观察物中导出一个状态”，对吗？如果是这样的话，你问题的其他内容大多会增加混乱。我不知道答案，但如果你想让问题的核心部分更加突出，其他人更可能会插话。如果问题是关于“如何从两个可观察物中导出一个状态”，对吗？如果是这样的话，你问题的其他内容大多会增加混乱。

export class mainScreenComp implements OnInit, OnDestroy {

  multipleSelectionMode: Observable<boolean>;
  oneChoosenIds: string[];
  multipleChosenIds: string[];
  _oneChoseSquareIdsSubscription: Subscription;
  _multipleChoseSquaresIdsSubscription: Subscription;

  ngOnInit() {
    this.multipleSelectionMode = this.brainComp.curSelectionTyp.map(selecType => selecType === SelectionType.multiple);
this._oneChoseSquareIdsSubscription = this.brainComp.choosingOption.subscribe(
  (chos: ChoosingOption) => {
    switch (chos.option) {
      case ChoosingOption.oneChose:
        this.oneChoosenIds = chos.chosedIds.squares;
        break;
      case ChoosingOption.finishedOneSel:
        this.oneChoosenIds = undefined;
        break;
    }
  }
);


this._multipleChoseSquaresIdsSubscription = this.brainComp.choosingOption.subscribe(
  (chos: Chosed) => {
    this.multipleChosenIds = chos.squares;
  }
);

isOneChoosed(square: SquaresIQ): boolean {
    return (this.oneChoosenIds ? this.oneChoosenIds.includes(square.squareId) : false);
  }


  isMultipleChoosed(square: SquaresIQ): boolean {
    return (this.multipleChosenIds ? this.multipleChosenIds.includes(square.squareId) : false);
  }