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
第一次点击 - ＆gt; item.done = true 已显示
第二次点击 - ＆gt; item.done = false 已显示
第三次点击 - ＆gt; item.done = true 显示为两次 Screenshot

＆＃13;

// 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)

  }

}

＆＃13;

<!-- 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>

＆＃13;

Answer 1

修改

当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 2

添加建议答案列表。

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

<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 3

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

希望这有帮助。

* ngIf在False时不删除元素，在True

3 个答案: