由于我想创建一个 Web 组件，我创建了一个简单的 Angular 6 项目。（GitHub 网址）。您可以使用git clone https://github.com/CSantosM/angular-elements-demo.git.
我已按照本教程进行操作，并且成功创建了 Web 组件。但是，当我在另一个应用程序中使用 JavaScript 测试这个 Web 组件时，它并不能完全工作。
问题是*ngIf="display"html button.component.tsgithub代码：
<div *ngIf="display">
<h3>Hello {{_userName}}</h3>
<div class="button-row">
<button mat-icon-button color="primary" (click)="toggleBlue()">
<mat-icon aria-label="Example icon-button with a heart icon"
matTooltip="Like">favorite</mat-icon>
</button>
</div>
<mat-icon *ngIf="blue">alarm</mat-icon>
</div>
在我位于此处的 JavaScript 应用程序中插入 Web 组件并动态更改输入 Web 组件，该按钮无法正常工作。
我的 index.html 是（github代码）：
<div id="main" style="text-align: center;">
<h1>Insert your name</h1>
<form onsubmit="sendName(); return false" style="padding: 80px; margin: auto">
<p>
<label>User:</label>
<input type="text" id="user" value="User1" required>
</p>
<p>
<input type="submit" value="JOIN">
</p>
</form>
</div>
<custom-button name=""></custom-button>
<!-- WebComponent JS -->
<script type='application/javascript' src='custom-button.js'></script>
<!-- WebComponent JS -->
<script>
function sendName() {
var user = document.getElementById('user').value;
var ov = document.querySelector('custom-button');
ov.userName = user;
}
</script>
当我按下这个应用程序的按钮时，该sendName()函数被调用并 userName input发生变化，名为angular 的变量display更改为true，并且可以看到 Web 组件。（github代码）
如果我不包含该display变量，则 Web 组件将按应有的方式工作。
在这里你可以看到行为：
Angular 是否存在已知错误？为什么使用简单的 *ngIf，Web 组件不能正常工作？如何解决这个问题？
提前致谢。