Используйте ngIf для условного добавления атрибута к кнопке

Question

У меня есть диалоговое окно, в котором есть несколько кнопок, и я могу установить primary = "true", чтобы сделать его ответом по умолчанию для пользователя. В моем случае значение для primarryButton - button1 и button2, и я хочу, чтобы оно было установлено, если оно имеет значение primary = "true", у другой кнопки ничего не будет.

<div>
        <button class="button" kendoButton (click)="onCancelAction()" >{{Button2}}</button>
        <button class="button" kendoButton (click)="onConfirmAction()" >{{Button1}}</button>
</div>

, поэтому ngif должен сказать в строкедля Button1

*ngIf="primaryButton==='button1'" then primary="true"

, но не уверен, как этого добиться

Answer 1

Bearly понять, что вы хотите достичь, попробуйте это:

  <kendo-dialog-actions>
      <div>
        <ng-container *ngIf="primaryButton == 'Button1'; then but1; else but2"></ng-container>
          <ng-template #but1>
              <button class="button" kendoButton (click)="onCancelAction()">{{Button2}}</button>
              <button class="button" kendoButton (click)="onConfirmAction()" primary="true" >{{Button1}}</button>
          </ng-template>
          <ng-template #but2>
              <button class="button" kendoButton (click)="onCancelAction()" primary="true">{{Button2}}</button>
              <button class="button" kendoButton (click)="onConfirmAction()" >{{Button1}}</button>
          </ng-template>
      </div>
    </kendo-dialog-actions>

Answer 2

Вам вообще не нужно использовать ngIf здесь, как уже упоминалось в комментариях. В Angular, если вы передаете null атрибуту , связывающему , он не обрабатывается. Таким образом, мы можем просто добавить троичное выражение в атрибут primary, используя привязку атрибута, и условно передать true или null.

<kendo-dialog-actions>
    <div>
        <button class="button" [attr.primary]="primaryButton === 'Button1' ? true : null" kendoButton (click)="onConfirmAction()">{{Button1}}</button>
        <button class="button" [attr.primary]="primaryButton === 'Button2' ? true : null" kendoButton (click)="onCancelAction()">{{Button2}}</button>
    </div>
</kendo-dialog-actions>

Answer 3

Вместо добавления ngIf в пользовательский атрибут primaryButton для вашего элемента, почему бы вам не поиграть с самим классом.

Если вам все еще нужен атрибут, то дайте мне знать .. Я обновлю вас в соответствии с вашими требованиями.