*ngFor和过滤管

Question

你所看到的：

• 可以选择的调色板组件列表。
• 列表上选定的调色板
• 选择的调色板不在列表中了！错了！
• 每次选择调色板时，只会绘制之前选择的调色板，这会导致列表以重复的形式展开。

我所做的：

<ng-container
          *ngFor="let palette of palettes | exclude: currentPalette.name">
    <div class="span-6">
      <app-palette
              (click)="choosePalette(palette)"
              [palette]="palette"
              [name]="palette.name"
              [icon]="palette.icon.name">
      </app-palette>
    </div>
  </ng-container>

真正有用的是：

<ng-container
          *ngFor="let palette of palettes">
    <div class="span-6" *ngIf="palette.name !== currentPalette.name">
      <!-- TODO pipe this to not show already selected -->
      <app-palette
              (click)="choosePalette(palette)"
              [palette]="palette"
              [name]="palette.name"
              [icon]="palette.icon.name">
      </app-palette>
    </div>
  </ng-container>

“排除”管道只是一个过滤器(array.filter(p => p.name !==名称))；

当我调试整个程序时，它向我表明，所有的东西都处理得很好，但是只有应该显示的组件正在被重新绘制，但是其余的部分与应该消失的项保持在一起。这会导致项目重复，并淹没列表。

我怎么才能用烟斗做这件事？或者我在哪里弄错了？

Answer 1

好吧我解决了。这不是管道的问题，而是呈现DOM元素的问题。

app-palette有ngStyle指令，它引用如下对象：

[ngStyle]=palette.foregound

只需将所有引用更改为：

[ngStyle]=palette?.foreground

瞧！