在 Angular 4 html 组件中添加插值和三元

Question

我想做一件奇怪的事情，因为角度正在抱怨。有没有人尝试在 Angular 4 上的 html 代码中混合插值和三元

在输入上，我尝试使用三元注入 matToolTip，同时使用管道将字符串转换为显示，如下所示：

<input
                typeaheadOptionField="name"
                typeaheadOptionsLimit="15"
                placeholder="{{ 'odal.selectPlaceholder' | translate }}"
                class="form-font-size form-control"
                style="vertical-align: middle"
                type='text'
                [matTooltip]="!isRefAutorized ? {{ 'modal.refSelect' | translate }} : null"
                (keyup.enter)="createStyle(styleCode.value)"
                #styleCode
            />

但有角度的抱怨

Parser Error: Got interpolation ({{}}) where expression was expected at column 18 in [!isRefAutorized ? {{ 'modal.selectPlaceholder' | translate }} : null]

it works fine when I do just:

 [matTooltip]="!isRefAutorized ? 'not authorized' : null"

Answer 1

你不能这样做。

相反，您应该按如下方式更改代码

[matTooltip]="!isRefAutorized ? ( 'modal.refSelect' | translate ) : null"