javascript - 按条件显示/隐藏 Angular 元素

Question

我使用基本的 Angular 构建了一个功能，将“和僵尸”添加到所选的书名中。

         <input type="text" ng-model="bookname" onclick="zombies()"> 
            <h1> {{bookname}} </h1> 

我希望仅当输入中有文本时才显示“和僵尸”(以及输入中插入的文本)。

我开始尝试这样做，只是为了使用 JS 调用 Angular ，但它不起作用。

      <script>
    function zombies() {
    document.getElementsByTagName("h1").innerHTML = "{{}}" + "and zombies";
    };
    </script>

当输入中有文本时，如何显示文本？(请放宽我，我一个人在学习，你们都是从小三开始的)

Answer 1

您只需添加检查bookname 值的条件，并显示带有您姓名的静态内容。

像这样-

<input type="text" [(ngModel)]="bookname" (click)="zombies()"> 
<h1> {{bookname}} <span *ngIf='bookname'>and zombies</span> </h1>