根据从 Observable 接收到的道具的条件创建新数组

Question

我有返回以下数组的 myObservable$：

[
 { "firstProp": "A", "secondProp": "NA", "available": false },
 { "firstProp": "B", "secondProp": "NA", "available": true },
 { "firstProp": "C", "secondProp": "Old", "available": false },
 { "firstProp": "C", "secondProp": "New", "available": false }
]

我需要一种方法来创建一个新数组来检查“firstProp”和“可用”并将以下结构推入一个新数组：

[
 { imgSrc: 'pathTo/myImages/file1.svg', badgeStyle: val?.available ? 'fas fa-exclamation-circle fa-lg' : 'fas fa-check-circle fa-lg', cardLabel: 'First Label'},
 { imgSrc: 'pathTo/myImages/file2.svg', badgeStyle: val?.available ? 'fas fa-exclamation-circle fa-lg' : 'fas fa-check-circle fa-lg', cardLabel: 'Second Label'},
 { imgSrc: 'pathTo/myImages/file3.svg', badgeStyle: val?.available ? 'fas fa-exclamation-circle fa-lg' : 'fas fa-check-circle fa-lg', cardLabel: 'Third Label'},
]

这是我的解决方案，但我觉得可能有更好的解决方案：

const OBJ1 = { imgSrc: 'pathTo/myImages/file1.svg', badgeStyle: val?.available ? 'fas fa-exclamation-circle fa-lg' : 'fas fa-check-circle fa-lg', cardLabel: 'First Label'};

const OBJ2 = { imgSrc: 'pathTo/myImages/file2.svg', badgeStyle: val?.available ? 'fas fa-exclamation-circle fa-lg' : 'fas fa-check-circle fa-lg', cardLabel: 'Second Label'};

const OBJ3 = { imgSrc: 'pathTo/myImages/file3.svg', badgeStyle: val?.available ? 'fas fa-exclamation-circle fa-lg' : 'fas fa-check-circle fa-lg', cardLabel: 'Third Label'};



myObservable$.subscribe((value) => {
      value?.forEach((val) => {
        if (val?.firstProp === 'A') {
          this.myNewArray.push(OBJ1);
        } else if (val?.firstProp === 'B') {
          this.myNewArray.push(OBJ2);
        } else if (val?.firstProp === 'C' && val?.secondProp === 'New') {
          this.myNewArray.push(OBJ3);
        }
      });
    });

在以下情况下，我也未能找到解决方案：

因为我使用不同类型的“secondProp”（旧的和新的）将“firstProp”作为“C”的 2 倍。规则是，当一个或两个“C”都“可用”时，我必须将badgeStyle显示为“感叹号”：true，当两个C都“可用”时，我必须显示badgeStyle的“green-tick”：false

Answer 1

假设您已将 myNewArray 属性重新定义为 Observable，与您当前使用的解决方案相比，这样做的好处是您不必担心取消订阅 Observable，因为 angular 会占用为你照顾那部分。下面我们来演示一下……

//...

// so let us start by redefining the myNewArray as the Observable
myNewArray$: Observable<Array<{ imgSrc: string; badgeStyle: string; cardLabel: string }>>;

// you will need to initialize the above ofcourse so we will do this in the
// component constructor
constructor() {
  //... so then you initialize the myObservable property
  // then you assign the myNewArray
  this.myNewArray$ = this.myObservable$.pipe(
    map((value) => {
      if (val?.firstProp === 'A') {
        return OBJ1;
      } else if (val?.firstProp === 'B') {
        return OBJ2;
      } else if (val?.firstProp === 'C' && val?.secondProp === 'New') {
        return OBJ3;
      }
      // you will probably get a ts error for not having an else statement
      // so you will need to accommodate the else state
    })
  );
}

//...

根据上述内容，您将在组件代码的 html 部分中使用 async 管道。

<ng-container *ngIf="(myNewArray$ | async) as newdata">
  <!-- content here -->
</ng-container>

因此，您的内存泄漏较少，因为 Angular 会在 组件被销毁。