*ngIf 未按预期渲染 svg

问题描述 投票:0回答:1

我正在尝试使用 *ngIf 有条件地渲染 svg 图标。我已将 CommonModule 和 BrowserModule 导入到组件中,但每次运行代码时 svg 都没有按应有的方式呈现。

HTML模板代码:

<svg *ngIf="!filename" xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="black" class="bi bi-file-earmark-x" viewBox="0 0 16 16">
          <path d="M6.854 7.146a.5.5 0 1 0-.708.708L7.293 9l-1.147 1.146a.5.5 0 0 0 .708.708L8 9.707l1.146 1.147a.5.5 0 0 0 .708-.708L8.707 9l1.147-1.146a.5.5 0 0 0-.708-.708L8 8.293z"/>
          <path d="M14 14V4.5L9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2M9.5 3A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5z"/>
</svg>

组件代码:

@Component({
  selector: 'jhi-quiz-generator',
  templateUrl: './quiz-generator.component.html',
  styleUrls: ['./quiz-generator.component.scss'],
})
export class QuizGeneratorComponent {
  isPdf = false;
  filetype = '';
  filename = '';
}

我尝试过使用不同的条件,例如

*ngIf="filename == false"
,但似乎没有任何效果。

html angularjs typescript frontend rendering
1个回答
0
投票

我意识到我忘记将 QuizGeneratorModule 导入到主 AppModule 中。现在一切正常!

© www.soinside.com 2019 - 2024. All rights reserved.