Question

嗨我正在尝试使芯片输入不可用。我从其中一个组件获取对象的数据，并使用数据的密钥作为芯片标签。

这是我的HTML代码

<div class="inputDiv" *ngFor="let k of key">
  <div class="inlineclass">
      <span class="title">{{k}}</span>
          <p-chips [(ngModel)]="filterInput[k]" ></p-chips>
  </div>
</div>

这是我从中获取数据的组件

import { Component, OnInit } from '@angular/core';

@Component({
selector: 'itc-upc-itc-component-filter',
templateUrl: './itc-component-filter.component.html',
styleUrls: ['./itc-component-filter.component.scss']
})
export class ItcComponentFilterComponent implements OnInit {
filterInput= { 'size': ['1T', '2T', '3T'], 'status': [ 'in progress','complete', 'pending']};
key= Object.keys(this.filterInput);
constructor() { }

ngOnInit() {
}

}

我尝试过ng primes chips属性的禁用属性

<p-chips [(ngModel)]="filterInput[k]" disabled="true"></p-chips>

有什么方法可以让这个输入不可编辑，但同时应该可以删除芯片

Answer 1

您应该听取仅允许df2['Col2'] = df2['Col3'].map(df.set_index('Col1')['Col2']) print (df2) Col3 Col4 Col2 Row1 1 T1 ONE Row2 2 T2 TWO Row3 3 T3 NaN和backspace键的键盘事件。这样你可以删除但不添加字符。

<强> HTML：

delete

<强>打字稿

  <span *ngIf="filterInput[k]" class="title">{{k}}</span>
  <p-chips (keydown)="onChange($event)" [(ngModel)]="filterInput[k]" ></p-chips>

DEMO

Answer 2

Angular + Lodash

 <p-chips [(ngModel)]="chips" (keydown)="onChangeChips($event)"></p-chips>

import {BACKSPACE, DELETE} from '@angular/cdk/keycodes';
import * as _ from 'lodash';

onChangeChips(event) {
  return _.has([BACKSPACE, DELETE], event.code);
}

有没有办法禁用添加芯片（primeng）但应该在角度2中删除

2 个答案: