我正在尝试使用 *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"
,但似乎没有任何效果。
我意识到我忘记将 QuizGeneratorModule 导入到主 AppModule 中。现在一切正常!