html - 如何在角度中禁用matchip
问题描述
所以我有标签组件,并在我的图表详细信息组件中导入了该组件。在我的图表详细信息组件中,我有一个复选框,它将禁用位于图表详细信息页面内的所有输入框、下拉框和按钮,但是由于某种原因,当我单击该复选框时,我的导入标签组件没有被禁用。任何有关如何解决此问题的建议或帮助,以便用户在单击复选框时无法添加或删除标签,我们将不胜感激。
图表详细信息组件。HTML
//Check box to disable all the input, drop down, buttons
<mat-checkbox *ngIf="chart && workspace" color="primary" [disabled]="this.workspace.type === WorkspaceType.user"
[(ngModel)]="chart.isPublished" (ngModelChange)="publishChange($event)">Published</mat-checkbox>
//Example Button
<button color="primary" mat-flat-button (click)="saveClick()" [disabled]="this.chart.isPublished">Save</button>
// Imported Tags Component
<mc-tags [_normalTags]="chart.tags" [removable]="true" [selectable]="true"
(added)="tagAdded($event)" (removed)="tagRemoved($event)" [disabled]="this.chart.isPublished" >
</mc-tags>
我添加了 [disabled]="this.chart.isPublished" 但我收到一条错误消息“无法绑定到 'disabled',因为它不是 'mc-tags' 的已知属性。”。我也尝试过(禁用)但仍然无法正常工作,即使选中了复选框,用户仍然可以添加或删除标签。
标签 Component.HTML
<mat-chip-list #chipList [disabled]="true">
<mat-chip *ngFor="let chip of normalTags" [selectable]="selectable"
[removable]="removable"
(removed)="removeTags(chip)">
{{chip.tag}}
</mat-chip>
<input matInput #input [(ngModel)]="tagIn" [formControl]="tagCtrl2"
[matAutocomplete]="auto" />
</mat-chip-list>
现在我必须在标签 component.html 中的 mat-chip-list 上执行 [disabled]="true" 以便用户无法添加或删除它。我不想对此进行硬编码,而是想使用图表详细信息组件复选框来控制它。
它不会运行,但我已将这两个组件的整个代码附在此处https://stackblitz.com/edit/angular-ivy-wwfcai。谢谢
解决方案
您可以使用 Input 传递 true 或 false,然后您可以禁用标签。
或者
//复选框禁用所有输入、下拉、按钮
<mat-checkbox *ngIf="chart && workspace" color="primary" [disabled]="this.workspace.type === WorkspaceType.user"
[(ngModel)]="chart.isPublished" (ngModelChange)="publishChange($event)">Published</mat-checkbox>
//Example Button
<button color="primary" mat-flat-button (click)="saveClick()" [disabled]="this.chart.isPublished">Save</button>
// Imported Tags Component
您可以使用pointer-events:none;
它来禁用它。您还可以应用条件 CSS
<div style="pointer-events:none;">
<mc-tags [_normalTags]="chart.tags" [removable]="true" [selectable]="true"
(added)="tagAdded($event)" (removed)="tagRemoved($event)" [disabled]="this.chart.isPublished" >
</ div>
</mc-tags>
enter code here
推荐阅读
- html - 是否可以在 HTML 中将字母屏蔽为空格?在这种情况下,我想将 UNDERSCORE(_) 屏蔽为空格
- c++ - Qt 和 C++:斜线、水平线和垂直线
- android - 如何让 Jetpack 组合 IconButton 的宽度以适应儿童的宽度?
- go - 将 http.Response 转换为字节数组
- android - 如何在 android 应用程序中获取本机库(64 位 JNI .so)路径?
- html - 为什么 align-items 不居中 div?
- python - 在 Python 中使用 split 函数时如何防止自动转义反斜杠
- python - 从 gromacs 文件中读取数据并将其写入 hdf5 文件格式
- javascript - VS 代码将“它”变成“hasUncaughtExceptionCaptureCallback”。如何禁用此功能?
- server - 服务器到服务器上传