Ошибка перевода трубы в aria-label в Angular Material Design

Может быть, тривиальный вопрос, но я не смог найти ответ в гугле.

В моем приложении 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>

У меня вообще нет ошибки.

Это выше моего понимания. Это проблема с угловыми реализациями Google MAT или я что-то упустил?

заранее спасибо


angular angular-material2 translate
person Community    schedule 02.05.2018    source источник
comment
как насчет того, чтобы удалить {{ }} и просто 'REGISTER.CREATE' | translate   -  person Tin    schedule 02.05.2018
comment
@Tin Спасибо Тин, но это не работает. Компилятор не жалуется, но выводимый текст вообще не переводится. Это точно так же, как написать НЕКОТОРЫЙ.ПРЯМОЙ.ТЕКСТ   -  person    schedule 03.05.2018
comment
Привет, @Raffaele, я не знаю, получил ли ты уже ответ. Я нашел этот stackoverflow .com/questions/42658800/. Это именно то, что вы хотите. attr.aria-label="{{'REGISTER.CREATE' | translate}}"   -  person Tin    schedule 03.05.2018
comment
@Tin Это работает, спасибо. Если вы разместите свой комментарий в качестве ответа, я отмечу его как принятый.   -  person    schedule 04.05.2018

Ответы (2)


arrow_upward
14
arrow_downward

Добавьте attr. следующим образом:

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

Ссылка: Как связать динамические данные с ARIA-LABEL?

person Tin    schedule 05.05.2018

arrow_upward
0
arrow_downward

и если значение из *ngFor , вам нужно удалить ''

      <mat-nav-list dir="rtl" *ngIf="(categories$ | async) as categories">
    <a mat-list-item *ngFor="let category of categories" 
     attr.aria-label="{{category.name | translate}}"
     (click)="onSidenavCloseClick()" [routerLink]="category.link"
      routerLinkActive="active">
      {{category.name | translate}}
    </a>
  </mat-nav-list>
person DanielD    schedule 21.01.2019