时间戳

首页 > 解决方案 > 如何在第一次尝试使用来自先前离子段值的 ionChange 事件时触发使用 *NgFor 的 ion-select 内部的 DOM

javascript - 如何在第一次尝试使用来自先前离子段值的 ionChange 事件时触发使用 *NgFor 的 ion-select 内部的 DOM

问题描述

我正在尝试根据类别上的选定值缩小子类别的选项。我正在使用一个 (ionChange) 函数，它根据所选的类别过滤数组。当我控制台日志时， sub_category 数组确实缩小了，但 DOM 仍然在第一次尝试时显示所有值。如果我尝试选择另一个类别，则会触发 DOM 并正确显示缩小的 sub_category 数组。在下面的示例中，我还在 ap 标记中显示 sub_category 的长度。从第一次尝试开始，sub_category 的长度就正确地改变了。所以这里的问题显然在 <ion-select *ngFor>

这是我的代码：

<h4>Category <span class="important-text">*</span></h4>
<ion-segment formControlName="ts_general_category (ionChange)="filterByCategory($event.detail.value)">
    <ion-segment-button *ngFor="let general_ts of ts_general"
                        [value]=general_ts.id>
        {{ general_ts.name_en}}
    </ion-segment-button>
</ion-segment>


<div *ngIf="filtered_ts_sub_general && filtered_ts_sub_general.length > 0">
    <p>{{filtered_ts_sub_general.length}}</p>
    <h4>Sub-Category</h4>
    <ion-select formControlName="ts_sub_general_category"
                class="my-selected-option"
                (ionChange)="filterBySubCategory($event.detail.value)"
                interface="popover">
        <ng-container *ngFor="let sub_general of filtered_ts_sub_general; let i = index">
            <ion-select-option [value]=sub_general.id>
                <p >{{i}}</p>
            </ion-select-option>
        </ng-container>
    </ion-select>
</div>

filterByCategory(category: string) {
    this.current_general_id = category;
    this.filtered_ts_sub_general = [...this.ts_sub_general.filter(sg => sg.traffic_sign_general_id.includes(category))];
  }

这是初始状态

这是初始状态

在第一次单击类别项目时，子类别应该显示一个项目，但显示所有项目。p 标签正确显示数字 1

在第一次点击类别项目

在第二次点击时，sub_category 的 DOM 正确显示了 3 个值，而 p 标签正确显示了数字 3

第二次点击

从第二次点击到 dom 按预期工作后，我怎样才能让它从第一次点击开始工作？

我已经使用了 trackBy 和过滤器管道，它们都没有从第一次单击时触发 dom。

标签： javascriptangularangular7ngforion-select

解决方案

推荐阅读