使用 [(ngModel)] 的硬编码字符串

Question

我正在尝试将字符串 "By - " 附加到通过 ngModel 从属性获得的值，即 <textarea [(ngModel)]="book.Author"..> 并将其添加到 header <h2>{{book.Title}}</h2> 在 angular 使其显示 "Title By - Author"。正在通过 http api 获取数据。仅当文本区域中有 Author 值时，我才需要 "By - Author"。我如何实现这一目标？我是 angular.

的新手

Answer 1

一个解决方案是在 header 中结合使用 Angular 指令 *ngIf 和 <ng-container> ，如下所示：

<h2>
{{book.Title}} <ng-container *ngIf="book.Author"> By - {{book.Author}}</ng-container>
</h2>

ng-container

doesn't interfere with styles or layout because Angular doesn't put it in the DOM.

Answer 2

您可以使用 [ngModel] 属性与输入事件发射器绑定来实现此目的。 https://stackblitz.com/edit/angular-jbqub9

使用 [(ngModel)] 的硬编码字符串

Hardcoded string with [(ngModel)]

angular

angular-ngmodel