在Angular Material Design的aria标签内翻译管道失败

Question

也许这是一个琐碎的问题，但我始终无法找到任何答案。

在我的Angular 5应用中，我的HTML是这样的：

<button mat-raised-button color="accent" class="submit-button" aria-label="{{'REGISTER.CREATE' | translate}}"
        [disabled]="registerForm.invalid">
    {{'REGISTER.CREATE' | translate}}
</button>

产生以下错误：

Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'aria-label' since it isn't a known property of 'button'. ("             </div>

                <button mat-raised-button color="accent" class="submit-button" [ERROR ->]aria-label="{{'REGISTER.CREATE' | translate}}"
                        [disabled]="registerForm.inval"): ng:///Register2Module/FuseRegister2Component.html@76:79
syntaxError

但是如果我写：

<button mat-raised-button color="accent" class="submit-button" aria-label="SOME DIRECT TEXT"
        [disabled]="registerForm.invalid">
    {{'REGISTER.CREATE' | translate}}
</button>

我一点都没有错。

这是我无法理解的。这是angular的Google MAT实现的问题吗？还是我错过了一些东西？

先感谢您

Answer 1

添加attr.如下内容：

attr.aria-label="{{'REGISTER.CREATE' | translate}}"

参考：如何将动态数据绑定到ARIA-LABEL？