Как использовать отключенное свойство на mat-list-item в angular 6?

Question

У меня есть mat-list, в котором есть элементы mat-list-items, я делаю отключенным Статус с именем [mat-list-item] используя [disabled], но он не работает и выдает ошибку вроде (Невозможно связать с 'disabled', так какне известное свойство 'mat-list-item') Как отключить определенный элемент mat-list-item в angular 6?

<mat-list>
  <mat-list-item routerLink="/base/notificstatus" [disabled]="payloadArray.enabled != 'true' ">Status</mat-list-item>
  <mat-list-item routerLink="/base/notifcategory">Category</mat-list-item>
</mat-list>

Answer 1

Если вы хотите прекратить переход на эту страницу, вы можете сделать это, используя ponter-events

Свойство pointer-events CSS указывает, при каких обстоятельствах (если таковые имеются) конкретный графический элемент может статьцель событий мыши.

<mat-list>
  <mat-list-item routerLink="/base/notificstatus"
 [ngStyle]="{'pointer-events':payloadArray.enabled == 'true' ?'auto':'none'}"
>Status</mat-list-item>
  <mat-list-item routerLink="/base/notifcategory">Category</mat-list-item>
</mat-list>

Answer 2

Другой способ: вы можете использовать css.

Внутри html:

<mat-list-item *ngFor="let item of itemList" (click)="!isContentLoading && loadContent(item.id)" [class.disabled]="isContentLoading">

CSS :

mat-list-item.disabled{
    cursor: not-allowed !important;
    opacity: 0.5;
    text-decoration: none;
}

Внутри controller вы объявляете переменную, в моем случае isContentLoading, значение которой вы можете изменить внутри метода loadContent (item.id), который вызывается при щелчке для элемента списка или для элемента списка.кнопка «a» (привязка).

* не забывайте «! важное» в css, поскольку mat-list-item имеет собственный стиль

Answer 3

Вы не можете отключить его, потому что mat-list-item по умолчанию не активируется.

Что вы можете сделать, это использовать *ngIf, чтобы показать mat-list-item с ссылкой на маршрутизатор и mat-list-item без ссылки на маршрутизатор.

Примерно так:

<mat-list>
    <mat-list-item routerLink="/base/notificstatus" *ngIf="!payloadArray.enabled">Status</mat-list-item>
    <mat-list-item *ngIf="payloadArray.enabled">Status</mat-list-item>
    <mat-list-item routerLink="/base/notifcategory">Category</mat-list-item>
</mat-list>