Question

首先，对不起，如果重复的话，我已经检查了一段时间，但到目前为止，没有任何问题可以解决我的疑问。

简而言之，我正在开发具有多种形式的应用程序。在大多数情况下，如果用户从通常的“确认”视图返回时看到了放置数据的信息（以防万一，他们希望将其删除），则表单应该保留该数据。

我正在为此使用反应形式，并且在大多数情况下，它可以工作。在组件初始化时，我检查表单是否通过从确认组件触发的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（）初始化反应形式，并且每个参数都会检查组件是否接收到先前存储的数据，该数据已存储为retriedFormData对象。示例：

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

通过这种方式，如果表单接收到数据，参数可以轻松地“自动填充”自身。

整个应用程序中只有一项无法自动填充。我有一个包含通常的* ngFor选项的ion-select。每个选项都是一个包含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个参数，用户在下拉列表中会看到两个参数，即卡号和类型（贷记/借记）。所有参数tho通过位于ion-select中的 ionChange 进行存储，该调用调用了名为 handleCardSelection（）的组件中的方法，该方法存储了对象的参数：

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

当计时器提交数据并将其发送到“确认”视图时，一切都很好并且很花哨。但是，当我尝试返回时，我的ion-select并没有预加载它收到的信息（并且我已经多次测试Form确实将其所有信息取回，因此确实出现了card对象）。

就像上面示例中的卡号一样，我试图使组件检查它是否收到了“卡”对象：

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

在下面，反映了我分配给ion-select的formControlName：

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

但是无论我如何尝试，ion-select都会不会自动选择与其接收到的信息相匹配的选项。

所以毕竟，我的问题是：

（ionChange）似乎是设置选项本身的事件。

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

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

编辑：自从Suraj提到它以来（这不是一个坏方法），我确实尝试从ngOnInit调用handleCardSelection()，但没有任何作用

在此先感谢任何可以阐明自己的人。

Answer 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],

离子3-是否可以从组件触发IonChange事件？

1 个答案: