有没有办法禁止添加筹码（primeng），但应该在 angular 2 中删除

Question

你好，我正在尝试让芯片输入 ineditable.I 我正在从组件之一获取对象数据，并使用数据的密钥作为芯片标签输出。

这是我的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 素数芯片属性

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

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

Answer 1

您应该监听只允许 backspace 和 delete 键的键盘事件。这样你就可以删除但不能添加字符。

HTML:

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

打字稿

   onChange(event){
       if (!(event.keyCode == 8 || event.keyCode == 46)){
           return false
       }

   }

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），但应该在 angular 2 中删除

Is there any way to disable adding of chips(primeng) but should be deletable in angular 2

angular

typescript

primeng