*ngFor 和过滤管道答案

【问题标题】：*ngFor and filter pipe*ngFor 和过滤管道
【发布时间】：2017-11-01 17:40:38
【问题描述】：

你看到了什么：

您可以选择的调色板组件列表
列表上方的选定调色板
所选调色板不再在列表中！错误！
每次选择调色板时，只会绘制您之前选择的调色板，这会导致列表扩展为重复项

我做了什么：

<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 !== name));

当我调试整个事情时，它向我表明一切都处理得很好，但只有应该显示的组件被重绘，但其余部分与应该消失的项目保持一致。这会导致项目重复并淹没列表。

我怎样才能用管道做到这一点？还是我哪里弄错了？

【问题讨论】：

标签： angular ngfor angular-pipe

【解决方案1】：

好的，我解决了。这不是管道的问题，而是渲染 DOM 元素的问题。

app-palette 有 [ngStyle] 指令引用这样的对象：

[ngStyle]=palette.foregound

只需将每个引用更改为：

[ngStyle]=palette?.foreground

瞧！

【讨论】：