*ngIf 为 False 时不删除元素，为 True 时创建新元素

Question

我刚开始使用 Angular 并遇到*ngIf 的问题

应用启动时，*ngIf="item.done" 会根据 ToDo item 是否为 done 正确显示（或不显示）元素。但是，当我单击元素时，done 状态 更改（我是 console.logging 它），但元素 不会 消失，无论状态如何。相反，当状态返回done 时，它会再次创建相同的元素。

My HTML template

The onTick() function 改变 item.done 状态

1. item.done = false 隐藏 Screenshot
2. 第一次点击 –> item.done = true 显示
3. 第二次点击 –> item.done = false 显示
4. 第三次点击 –> item.done = true 显示两次 Screenshot

// MOCK DATA

import { Item } from './item';

export const ITEMS: Item[] = [
  {id: 1, title: 'Buy Milk', done: false},
  {id: 2, title: 'Do Math', done: true},
  {id: 3, title: 'Cook food', done: false}
]



// THE COMPONENT TypeScript

import { Component, OnInit } from '@angular/core';
import { ITEMS } from './mock-items';
import { Item } from './item';

@Component({
  selector: 'app-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.css']
})
export class ListComponent implements OnInit {
  items: Item[] = [];

  constructor() {
    this.items = ITEMS
  }

  ngOnInit() {
  }

  onTick(item) {
    console.log('Item was: ', item.done)
    item.done = !item.done
    console.log('Item became: ', item.done)

  }

}

<!-- THE COMPONENT HTML -->
<div class="list">
  <div class="list--header">
    <h1>List</h1>
  </div>

  <div class="list--content">
    <ul class="list--items">
      <li *ngFor="let item of items">
        <div class="checkbox" (click)="onTick(item)">
          <input type="checkbox" style="display: none">
          <i *ngIf="item.done" class="tick fas fa-check"></i>
        </div>
        {{item.title}}
      </li>
    </ul>
  </div>

  <div class="list--footer">

  </div>
</div>

Answer 1

添加到建议答案列表。

您可以将FontAwesomeConfig 属性autoReplaceSvg 设置为nest，这将自动将SVG 嵌套在<i> 元素中，从而不会弄乱HTML。

<script>
  // Add in your index.html or similar
  FontAwesomeConfig = { autoReplaceSvg: 'nest' }
</script>

然后像平常一样使用它

<i class="my-icon fas fa-coffee" data-fa-mask="fas fa-circle"></i>

你会得到以下结果

<i class="my-icon" data-fa-mask="fas fa-circle" data-fa-processed="">
  <svg class="svg-inline--fa fa-coffee fa-w-16" data-fa-mask="fas fa-circle" aria-hidden="true" data-fa-processed="" data-prefix="fas" data-icon="coffee" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">...</svg>
</i>

查看documentation 以获取更多参考。

Answer 2

编辑

当 Font Awesome 的 SVG 不是作为 <i *ngIf="item.done" class="tick fas fa-check"></i> 的子元素出现时，就会出现问题，而是替换了元素，因此 *ngIf 属性消失了。 看起来我们永远不应该在具有 Font Awesome 类的元素上使用 Angular 属性（而是以父元素为目标）。

过去的样子（不起作用）

<i *ngIf="item.done" class="tick fas fa-check"></i>

解决方案

<div *ngIf="item.done">
   <i class="tick fas fa-check"></i>
</div>

Answer 3

尝试将图标包装在 DIV 中...另外，重要的是要注意 ngIf 并非旨在“隐藏”元素。它实际上会在 DOM 中添加和删除它们。如果你的意图是隐藏/显示，你应该看看 ngHide。

希望这会有所帮助。