тег привязки не удалось отключить

Question

У меня есть ответ от бэкэнда, в этом ответе у меня есть поле статуса, если статус одобрен, я отключил тег привязки, но он не работает, я попытался найти, в чем проблема, но я не мог, может ли кто-нибудь сказать мне как исправить это ts

  this.receipt=this.dataSource.data;
    this.receipts=this.receipt.forEach(element => {
      this.status=element.status
      console.log(this.status);


    });   

html

    <!-- Id Column -->
        <ng-container matColumnDef="id">
          <mat-header-cell *matHeaderCellDef mat-sort-header="id"> Receipt No </mat-header-cell>
          <mat-cell *matCellDef="let row;let i=index"> <a [attr.disabled]="status =='APPROVED' ? true: null" (click)="openCreateReceipt(row)"
              routerLinkActive="router-link-active"
              class="link-class">{{row.id}}</a></mat-cell>
        </ng-container>

css

a.disabled {
  pointer-events: none;
  cursor: not-allowed; 
}

Answer 1

Я не думаю, что тег привязки имеет класс «отключен». Вы настраиваете таргетинг на "отключенный" класс для тега привязки.

используйте css:

a[status='APPROVED'] {
 pointer-events: none;
  cursor: not-allowed;
}

Answer 2

мы можем отключить тег привязки на основе класса, это решение

   <!-- Id Column -->
        <ng-container matColumnDef="id">
          <mat-header-cell *matHeaderCellDef mat-sort-header="id"> Receipt No </mat-header-cell>
          <mat-cell *matCellDef="let row;let i=index"> <a [class.disabled]="row.status=='APPROVED' ? true : null" (click)="openCreateReceipt(row)"
              routerLinkActive="router-link-active"
              class="link-class">{{row.id}}</a></mat-cell>
        </ng-container>

a.disabled {
  cursor: not-allowed;
  pointer-events: none;
}

Answer 3

Атрибут disabled для тега <a> отсутствует. Посмотрите Документацию .

! ОБНОВЛЕНО

Вы можете использовать do this вместо

<a status="FALSE" href="#">Name</a>

теперь в вашем CSS do like this

a[status="FALSE"] {
  cursor: not-allowed;
  pointer-events: none;
  /* rest of your disable code */
}

Теоретически необходимо передать настраиваемый атрибут status и присвоить ему значение. Затем используйте его для стиля