用字符串插值的HTML

Question

如何在字符串插值中用字符串编写HTML，

我想加载它应该显示Processing ....“loader”

<button type="button" class="btn btn-success" [disabled]="onAjaxCall" (click)="onSave()">
  {{ onAjaxCall ? 'Processing ...'+
            <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i> : 'Save' }}
</button>

它无法正常工作，I标签始终显示

Answer 1

仅供参考信息表单angular.io网站（点击此处：https://angular.io/guide/template-syntax）

禁止具有或促进副作用的JavaScript表达式，包括：

- assignments (=, +=, -=, ...)
- new
- chaining expressions with ; or ,
- increment and decrement operators (++ and --)

因此，对于您的情况，我建议使用方法并从模板语法中调用它。

<button type="button" class="btn btn-success" [disabled]="onAjaxCall" (click)="onSave()">
  {{ methodcall() }}
</button>

在组件写方法中，这将返回输出

method():string
{
  return 
 this.onAjaxCall ? 'Processing ...'+<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i> : 'Save';
}

Answer 2

试试这个

<button type="button" class="btn btn-success" [disabled]="onAjaxCall" (click)="onSave()">
       <span *ngIf="onAjaxCall">Processing...<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i></span>
       <span *ngIf="!onAjaxCall">Save:</span>
</button>