Question

我有具有mat-list-items的mat-list，我使用[disabled]禁用了名为mat-list-item的状态，但它不起作用并给出错误提示（无法绑定到“ disabled”，因为它不能't是'mat-list-item'的已知属性）如何在角度6中禁用特定的mat-list-item？

<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中使用'！important'，因为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>

Answer 4

这里是我基于最近项目的解决方案... html内：（对@adrian表示感谢）

::ng-deep .mat-list-item-disabled {
  cursor: not-allowed !important;
  opacity: 0.5;
  text-decoration: none;
  background-color: #f9f9f9 !important;
}

<mat-list-option *ngFor="let item of payloadArray" [disabled]="!payloadArray.enabled" **>

如何在角度6的mat-list-item上使用禁用的属性？

4 个答案: