文库 / 技术

如何使选项列表在目标组件中以角度可编辑？

分享于2022年07月17日 angular html picklist primeng 问答
【问题标题】：如何使选项列表在目标组件中以角度可编辑？(How to make picklist editable in the target component in angular?)
【发布时间】：2022-01-26 05:07:49
【问题描述】：

我正在使用 p-picklist ，我想编辑用于显示值的目标列表跨度数据。

我使用的是源码： https://primefaces.org/primeng/showcase/#/picklist

如何使目标列表中的产品名称可编辑。 


  
    

      

        
      

      

        
{{product.name}}

        
        {{product.category}}
      

      

        
${{product.price}}

        {{product.inventoryStatus}}


【解决方案1】：

将 <h5 class="p-mb-2">{{product.name}}</h5> 转换为 [(ngModel)]="product.name" 的输入似乎可行。

为了检查模板项是否列在 target 下而不是 source 下，您可以检查元素在DOM 上的位置；如果在 .p-picklist-target 内，则显示 input ，否则显示 h5 。

StackBlitz

推荐
标签
  • html(295)
  • rxjs(47)
  • azure(30)
  • nest(29)
  • javascript(1359)
  • vue-component(24)
  • search(23)
  • string(29)
  • angularjs(38)
  • sorting(23)
  • flask(28)
  • c#(446)
  • pandas(89)
  • function(27)
  • unit-testing(42)
  • reactjs(281)
  • vue-router(25)
  • selenium(38)
  • jestjs(39)
  • dataframe(35)
  • struct(25)
  • laravel(161)
  • go(543)
  • css(145)
  • objective-c(24)
  • vuetify.js(38)
  • npm(95)
  • next.js(31)
  • react-native(24)
  • kibana(50)
  • elastic-stack(36)
  • express(115)
  • go-gorm(23)
  • ionic-framework(37)
  • macos(36)
  • java(123)
  • symfony(26)
  • windows(36)
  • vuex(27)
  • mongodb(95)
  • async-await(26)
  • linux(39)
  • performance(26)
  • vuejs3(69)
  • discord.js(26)
  • php(684)
  • jquery(101)
  • ios(23)
  • python(685)
  • python-3.x(73)
  • angular-material(36)
  • visual-studio-code(48)
  • kubernetes(33)
  • mysql(621)
  • mongoose(38)
  • database(89)
  • docker(61)
  • .net(94)
  • ajax(42)
  • vue.js(544)
  • amazon-web-services(49)
  • django(42)
  • woocommerce(23)
  • spring-boot(46)
  • axios(49)
  • numpy(31)
  • sql(179)
  • logstash(30)
  • redis(23)
  • codeigniter(27)
  • .net-core(26)
  • c(113)
  • nuxt.js(51)
  • electron-builder(59)
  • unity3d(30)
  • date(23)
  • c++(205)
  • vuejs2(80)
  • electron(416)
  • spring-data-elasticsearch(28)
  • android(27)
  • postgresql(48)
  • matplotlib(23)
  • 问答(6214)
  • regex(33)
  • list(26)
  • sass(28)
  • json(124)
  • asp.net-core(46)
  • typescript(317)
  • firebase(44)
  • arrays(124)
  • visual-studio(30)
  • wordpress(58)
  • api(66)
  • asp.net(60)
  • elasticsearch(495)
  • node.js(869)
  • webpack(59)
  • angular(594)
在线工具