Ionic 3- 可能从组件触发 IonChange 事件？

Posted 2023-02-22

【中文标题】Ionic 3- 可能从组件触发 IonChange 事件？

【英文标题】：Ionic 3- Possible to trigger an IonChange event from component?

【发布时间】：2019-07-18 19:50:27

【问题描述】：

简而言之，我正在开发一个具有多种形式的应用程序。在大多数情况下，如果用户从通常的 Confirmation 视图返回，他们看到他们将数据（以防他们想要 omdify）放回表单，表单应该保留该数据。

我为此使用了反应形式，而且在大多数情况下，它都有效。 在组件初始化时，我检查表单是否通过从 Confirmation 组件触发的 EventEmitter 接收到一些信息：

   ngOnInit() 
    if (this.cardData) 
      this.retrievedFormData = 
    amount: this.cardData.card.amount.amount,
    card: 
      number: this.cardData.card.number,
      trade: this.cardData.card.trade,
      type: this.cardData.card.type,
      cardId: this.cardData.cardId,
    ,
    
    this.initForm();
  

initForm() 初始化响应式表单，并且每个参数检查组件是否接收到存储为检索的FormData 对象的先前数据。示例：

    this.formGroup = this.formBuilder.group(
      amount: [(this.retrievedFormData ? this.retrievedFormData.amount : null),
        [Validators.required, Validators.min(0.01), Validators.pattern(amountRegex)]],
)

这样，如果表单接收到数据，参数可以很容易地自行“自动填充”。

整个应用程序中只有一个项目不能很好地自动填充。我有一个离子选择，其中包含通常的 *ngFor 选项。每个选项都是一个包含 4 个参数的对象。

html:

  <ion-select name="card" formControlName="card" okText=" 'COMMON.OK' | translate " cancelText=" 'COMMON.CANCEL' | translate "(ionChange)="handleCardSelection($event)" >
    <ion-option *ngFor="let card of cards" [value]="card">card.number - card.type</ion-option>
  </ion-select>

'card' 被初始化为一个 AbstractControl，并且该对象有 4 个参数，用户在下拉列表中看到两个参数，即卡号和类型（信用卡/借记卡）。所有的参数都通过 ion-select 中的 ionChange 存储，它调用组件中的一个名为 handleCardSelection() 的方法，该方法存储对象的参数：

  handleCardSelection(card) 
        this.chosenCardData = 
          cardId: card.id,
          type: card.type,
          trade: card.trade,
          number: card.number
        ;
    

在提交数据并将其发送到 Confirmation 视图的计时器到时，一切正常且花花公子。但是，当我尝试返回时，我的 ion-select 没有预加载它收到的信息（并且我已经测试了几次 Form 确实将其所有信息取回，因此确实出现了卡片对象）。

就像上面关于卡金额的示例一样，我正在尝试让组件检查它是否收到了“卡”对象：

  card: [(this.retrievedFormData ? this.retrievedFormData.card : null),
      Validators.required],

在下面，反映了我分配给离子选择的 formControlName：

this.cardFC = this.formGroup.get('card');

但无论我尝试什么，离子选择都不会自动选择与其收到的信息相匹配的选项。

所以在这一切之后，我的问题如下：

(ionChange) 似乎是设置选项本身的事件。

<ion-select name="card" formControlName="card" (ionChange)="handleCardSelection($event)">

因为 (ionChange) 似乎只能由手动输入触发，如果组件检测到它已收到信息，我想自动激活它...有没有办法从组件触发 ionChange本身？这样，在检查先前信息并存储它的同一个 ngOnInit 期间，我可以触发事件以预先选择与接收到的数据匹配的卡。

编辑：由于 Suraj 提到了它（这不是一个坏方法），我确实尝试从 ngOnInit 调用 handleCardSelection()，但它没有任何效果。

【问题讨论】：

为什么不直接在if(cardaData) 中调用handleCardSelection(retrievedFormData.card)？

我试过@SurajRao，但离子选择从未自动填充。感到羞耻，因为这是一个非常直观的可能解决方案

您如何设置cards 选项？如果卡片是异步接收的，则可能在您设置选择时列表未填充

它本质上是一个初始化为空的数组，构造函数调用 getCardsList() 之类的方法来检索数据块，每个对象都是具有这些参数的特定卡片。然后，该数据块被存储在数组中，允许我执行“让卡片卡片”

所以当反应形式设置选择时它是空的？当时是空的吗？您可能需要在获取离子选择选项列表之后初始化表单

【参考方案1】：

这与ionChange 和触发它无关。

ion-select 设置从选项列表中预选的卡片。它似乎检查了参考。 retrievedFormData.card 是与卡片列表不同的对象。

您必须像这样从选项中获取参考：

let selectedCard = this.cards.find((c)=>c.id==this.retrievedFormData.card.id);

然后在initform中设置：

card: [(selectedCard ? selectedCard : null),
  Validators.required],