如何在角度中禁用matchip

Posted

技术标签:

【中文标题】如何在角度中禁用matchip【英文标题】:how to disable matchip in angular 【发布时间】:2020-10-21 06:27:51 【问题描述】:

所以我有标签组件,并在我的图表详细信息组件中导入了该组件。在我的图表详细信息组件中,我有一个复选框,它将禁用位于图表详细信息页面内的所有输入框、下拉框和按钮,但是由于某种原因,当我单击该复选框时,我的导入标签组件没有被禁用。任何有关如何解决此问题的建议或帮助,以便用户在单击复选框时无法添加或删除标签,我们将不胜感激。

图表详细信息组件。 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' 的已知属性。”。我也尝试过(禁用)但仍然无法正常工作,即使选中了复选框,用户仍然可以添加或删除标签。

标签组件.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 。谢谢

【问题讨论】:

【参考方案1】:

您可以使用 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

【讨论】:

以上是关于如何在角度中禁用matchip的主要内容,如果未能解决你的问题,请参考以下文章

如何在日期选择器角度禁用过去的日期

如何在角度5中禁用或覆盖cdk-focused

如何启用禁用的文本框 onclick 使用角度的按钮

如何禁用角度 p 日历中的过去日期?

角度日期范围选择器 - 如何在已经使用 min 属性将最小日期设置为今天时禁用同一天

如何使用角度链接功能禁用除特定元素之外的所有点击