如何禁用angular的matchip

所以我有标签组件,并将该组件导入了Chart-details组件。在我的“图表详细信息”组件中,我有一个复选框,它将禁用所有输入框,下拉框以及位于“图表详细信息”页面内的按钮,但是由于某些原因,当我单击该复选框时,我的导入标签组件未处于禁用状态。对于如何解决此问题的任何建议或帮助,使用户无法在单击复选框时添加或删除标签。

图表详细信息组件。 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”,以便用户无法添加或删除它。我不想对此进行硬编码,而希望使用“图表详细信息组件”复选框来控制它。

如何禁用angular的matchip

它不会运行,但是我在这里https://stackblitz.com/edit/angular-ivy-wwfcai附加了这两个组件的整个代码。谢谢

iCMS 回答:如何禁用angular的matchip

您可以使用Input传递true或false,然后可以禁用标签。

OR

//复选框以禁用所有输入,下拉菜单,按钮

    <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
本文链接:https://www.f2er.com/2025091.html

大家都在问