angular - 我不能在 Angular 6 的箭头上使用 Ngif

Question

这是我的 html 文件:

<div class="site"><a routerLink="site" (click)="myMove()"  class="text">
  <mat-icon svgIcon="site" class="icon"><span  class="fa fa-caret-right caret1"  *ngIf="text2"></span>
    <div *ngIf="text" class="text1">Site</div>
  </mat-icon>
</a></div>

这是我的 CSS 文件:

.text {
  margin: 0px 0px 0px 40px;
}
.caret1 {
  margin-left: 30px;
  position: absolute;
}

这是我的 typescript 文件:

export class GeneralManagementComponent implements OnInit {

  text = true;
  text2 = false;
   constructor() {
   }

   ngOnInit() {
   }

  public myMove() {
  this.text2 = true;
  this.text = false;
  }
 }

我想要做什么当我点击链接时，显示箭头，当我使用ngif时，它不适用于箭头。但是当我将 ngif 用于另一个 div 时，它就起作用了。 我不知道为什么我不能使用 ngif 作为箭头。

我在这里提出我的问题https://stackblitz.com/edit/angular-slmxmk?file=src%2Fapp%2Fapp.component.html

我使用 Angular 6。

Answer 1

组件.ts:

import { Component } from '@angular/core';
import {MatIconRegistry} from '@angular/material/icon';
import {DomSanitizer} from '@angular/platform-browser';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  text = true;
  constructor(
  private matIconRegistry: MatIconRegistry,
  private domSanitizer: DomSanitizer
  ){
        this.matIconRegistry.addSvgIcon(
      'site',
      this.domSanitizer.bypassSecurityTrustResourceUrl('../assets/icons/web.svg')
    );  
  }
    public myMove() {
    this.text = !this.text;
  }
}

html

<a (click)="myMove()" class="text">
  <mat-icon *ngIf="!text" svgIcon="site" class="icon">
    <span  class="divstyle1" >&#x27A4;</span>
    </mat-icon>
    <mat-icon *ngIf="text" svgIcon="site" class="icon">
    <div  class="text1">Site</div>
  </mat-icon>
</a>

链接: blitz