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

Question

我刚开始 Angular，*ngIf

有问题

应用程序启动时，*ngIf="item.done" 根据 ToDo item 是否为 done 正确显示（或不显示）元素。然而，当我点击元素时，done状态改变（我是console.logging它），但是元素没有消失，不管是什么状态。相反，当状态返回到 done 时，它会再次创建相同的元素。

My HTML template

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

item.done = false 隐藏 Screenshot
第一次点击 –> item.done = true 显示
第二次点击 –> item.done = false 显示
第三次点击 –> 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

编辑

The problem happens when Font Awesome's SVG, instead of appearing as a child of the <i *ngIf="item.done" class="tick fas fa-check"></i>, replaces the element, and so the *ngIf attribute disappears. Looks like we shouldn't ever use Angular attributes on an element with Font Awesome classes (target the parent element, instead).

过去的样子（不起作用）

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

解决方案

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

Answer 2

尝试将图标包裹在 DIV 中...另外重要的是要注意 ngIf 不适用于 "hide" 元素。它实际上会在 DOM 中添加和删除它们。如果你的目的是 hide/show，你应该看看 ngHide。

希望对您有所帮助。

Answer 3

正在添加到建议答案列表中。

您可以将 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 进一步参考。

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

*ngIf doesn't delete the element when False, creates new one when True

html

css

show-hide

angular