Events 返回值为假_Events_Two Way Binding_Stenciljs

Events 返回值为假

events

Events 返回值为假,events,two-way-binding,stenciljs,Events,Two Way Binding,Stenciljs,我正在用模具编写我的第一个web组件。这是一个发布在这里的组件：组件代码： import { Component, Prop, Watch, Event, EventEmitter } from '@stencil/core'; @Component({ tag: 'rp-pills', styleUrl: 'rp-pills.scss', shadow: false }) export class RpPills { @Prop() items: any[] = [];

我正在用模具编写我的第一个web组件。
这是一个发布在这里的组件：

组件代码：

import { Component, Prop, Watch, Event, EventEmitter } from '@stencil/core';

@Component({
  tag: 'rp-pills',
  styleUrl: 'rp-pills.scss',
  shadow: false
})
export class RpPills {

  @Prop() items: any[] = [];
  @Prop() displayProperty: string;
  @Prop({ mutable: true }) value: any;
  @Prop() class: string;
  @Prop() theme: string = 'default';
  @Prop() emptyMessage: string = 'No item';
  classes: string;

  @Event() valueChange: EventEmitter;

  onClick(item: any) {
    this.value = item;
    this.valueChange.emit(this.value);
  }

  @Watch('class')
  @Watch('theme')
  watchHandler() {
    this.classes = `nav nav-pills ${this.theme} ${this.class}`;
  }

  render() {
    if (this.items.length > 0)
      return (
        <ul class={this.classes}>
          {this.items.map((item) =>
            <li onClick={() => this.onClick(item)} class={this.value === item ? 'active' : ''} >
              <a>{item[this.displayProperty]}</a>
            </li>)}
        </ul>
      );
    else
      return (
        <ul class={this.classes}>
          <li class="empty">
            <a>{this.emptyMessage}</a>
          </li>
        </ul>
      );
  }
}

但是我的HTML示例和Ionic应用程序中的集成不起作用，并返回以下消息：{“isTrusted”：false}

HTML示例：

<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0">
  <title>Stencil Component Starter</title>
  <script src="/build/rppills.js"></script>
</head>
<style>
  .orange .active a {
    background-color: #ff0000;
  }

  .orange a {
    background-color: #ff6a00;
  }

  div {
    float: left;
    clear: both;
  }
</style>
<body>

  <div>
    <rp-pills display-property="name" class="nav-pills-bordered" theme="orange">
    </rp-pills>
    <span></span>
  </div>

  <div>
    <rp-pills display-property="name" class="nav-justified">
    </rp-pills>
    <span></span>
  </div>

  <div>
    <rp-pills display-property="name" class="nav-pills-bordered nav-justified">
    </rp-pills>
    <span></span>
  </div>

  <div>
    <rp-pills class="nav-pills-bordered">
    </rp-pills>
    <span></span>
  </div>

  <div>
    <rp-pills empty-message="Aucun message" class="nav-pills-bordered">
    </rp-pills>
    <span></span>
  </div>

  <div>
    <rp-pills>
    </rp-pills>
    <span></span>
  </div>

  <script>
    var cmps = document.querySelectorAll('rp-pills');
    for (var i = 0; i < cmps.length; i++) {
      var cmp = cmps[i];
      if (cmp.attributes.length > 0 && cmp.attributes[0].name == 'display-property') {
        cmp.value = { 'name': 'Coucou' };
        cmp.items = [cmp.value, { 'name': 'Comment ca va ?' }, { 'name': 'Au revoir' }];
        cmp.addEventListener('valueChange', (event) => { alert(JSON.stringify(event)); });
      }
    }
    setInterval(() => {
      var cmps = document.querySelectorAll('rp-pills');
      var spans = document.querySelectorAll('span');
      for (var i = 0; i < cmps.length; i++) {
        if (cmps[i].value != undefined)
          spans[i].innerText = cmps[i].value.name;
      }
    }, 1000);
  </script>

</body>
</html>


模板元件起动器
.橙色.活性a{
背景色：#ff0000；
}
.橙色a{
背景色：#ff6a00；
}
div{
浮动：左；
明确：两者皆有；
}
var cmps=document.querySelectorAll（'rp-pills'）；
对于（变量i=0；i0&&cmp.attributes[0].name==“显示属性”）{
cmp.value={'name'：'Coucou'}；
cmp.items=[cmp.value，{'name'：'Comment ca va？}，{'name'：'Au revoir'}]；
cmp.addEventListener（'valueChange'，（event）=>{alert（JSON.stringify（event））；}）；
}
}
设置间隔（（）=>{
var cmps=document.querySelectorAll（'rp-pills'）；
var span=document.querySelectorAll（'span'）；
对于（变量i=0；i

2个错误
我试着这么做：
<rp-pills [items]="jeux" [(value)]="partie.jeu"></rp-pills>

您不能用这种方式对自定义元素进行双向绑定。看见
<rp-pills [items]="jeux" [(value)]="partie.jeu"></rp-pills>

<rp-pills [items]="jeux" [value]="partie.jeu" (valueChange)="jeuChange($event.detail)"></rp-pills>

jeuChange(jeu: Jeu) {
  this.partie.jeu = jeu;
}