Angular 如何显示离子列表中所选项目的实际计数？

所以我正在为手机应用程序建立一个新的抑制页面。出于传统原因，我们使用的是离子3和离子5

我面临的问题是从离子选择多个=真实项目的列表中获得离子项目的真实计数。我有以下html

  <ion-list>
    <ion-item>
      <ion-label>Select Nodes</ion-label>
      <ion-select [(ngModel)]="selectedNodes" multiple="true">
        <ion-option *ngFor="let node of incident.context['nodes']" value={{node}}>{{ node }}</ion-option>
      </ion-select>
    </ion-item>
  </ion-list>

---

context['nodes']包含一个类似于[foo，bar，baz]的列表，一旦做出选择，它将显示所选项目的列表。但是我想显示计数。如何操作？

如果selectedNode是包含所选项目列表的数组，则只需显示数组的长度即可显示所选项目的总数

    <ion-list> 
    <ion-item> 
    <ion-label>Total Count</ion-label> 
    {{selectedNodes.length}}
    </ion-select> 
    </ion-item> 
    </ion-list>

---

我认为没有直接的方法可以做到这一点。但是，您可以直接修改DOM，例如使用Angular来显示长度。试试下面的方法

将事件处理程序onChange绑定到ngModelChange事件。 选择节点 {{node}} 所选项目将显示在具有类的DOM中的容器中。选择文本。直接在事件处理程序中修改它的innerHTML属性。 从'@angular/core'导入{Component，renderr2}； ... 导出类AppComponent{ selectedNodes=[]； 事件={ 背景：{ 节点：['node1'，'node2'，'node3'，'node4'] } }; 构造函数私有渲染器：渲染器2{} 一旦改变{ setTimeout=>{ const element=this.renderer.selectRootElement'。选择文本'； this.renderer.setPropertyelement，'innerHTML'，this.selectedNodes.length； }, 0; } } 工作示例：

---

如果没有setTimeout，innerHTML属性将不会更改，因为它可能被认为不可用。这是一个快速的解决方法。

您是否尝试了selectedNodes.Length谢谢这正是我想要的。