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>

＆＃39;排除＆＃39; pipe只是一个过滤器（array.filter（p =＆gt; p.name！== name））;

当我调试整个事情时，它向我显示所有内容都处理得很好但只有应该显示的组件正在重新绘制，但其余部分与应该消失的项目一起保留。这会导致它复制的项目并泛滥列表。

我怎么能用烟斗做？或者我错在哪里？

Answer 1

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

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

[ngStyle]=palette.foregound

只需将每个引用更改为：

[ngStyle]=palette?.foreground

瞧！

* ngFor和过滤管

1 个答案: