如何在 angular 中禁用 matchip

Question

所以我有 Tags 组件，我将该组件导入到我的 Chart-details 组件中。在我的图表详细信息组件中，我有一个复选框，它将禁用所有输入框、下拉框、位于 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"，这样用户就无法添加或删除它。我不想对此进行硬编码，而是想使用图表详细信息组件复选框来控制它。

不会运行但我已将这两个组件的完整代码附在此处 https://stackblitz.com/edit/angular-ivy-wwfcai 。谢谢

Answer 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

如何在 angular 中禁用 matchip

how to disable matchip in angular

html

disabled-input

typescript

angular

ngx-chips