我不能在 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;
}

这是我的打字稿文件：

export class GeneralManagementComponent implements OnInit {

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

   ngOnInit() {
   }

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

以及我想做什么当我点击link，显示箭头，当我使用ngif 它不适用于 arrow。但是当我将 ngif 用于另一个 div 时，它的工作。我不知道为什么我不能将 ngif 用于 arrow.

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

我使用 angular 6.

Answer 1

component.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>

link: blitz

我不能在 angular 6 中的箭头上使用 ngif

i cant use ngif on arrow in angular 6

arrows

angular-ng-if

angular