时间戳

首页 > 解决方案 > 离子选择选项不通过 ng-for 检索选项的值

angular - 离子选择选项不通过 ng-for 检索选项的值

问题描述

我在 IONIC 中构建此应用程序，尝试使用 IONIC GUI 建立下拉选择器，但由于某种原因未检索到 de 值。我获取了一个对象数组，这些对象将被循环以访问其值：

allProdSubtypes=
[
 {listOfImages: Array(2), id: 1, productSubType: "Roller Blades"},
 {listOfImages: Array(2), id: 2, productSubType: "Traditional Skates"},
 {listOfImages: Array(2), id: 3, productSubType: "Mountain Bike"},
 {listOfImages: Array(2), id: 4, productSubType: "City Bike"}
 {listOfImages: Array(0), id: 5, productSubType: "Not Classified"},
]

IONIC 中的 HTML 标签如下：

       <form [formGroup]="createImgForm" (ngSubmit)="createimage($event)">
           <ion-item class="form-group col-md-12 mx-auto">
           
            <input type="file" class="form-control" placeholder="Select image" formControlName="url" #imageUpload
              (change)="selectImg($event) " accept='image/**'>
          </ion-item>

          <ion-item>
            <ion-label>Select Product Sub Type</ion-label>
            <ion-select placeholder="Select Product Sub Type" *ngIf="allProdSubtypes">
              <ion-select-option  *ngFor="let option of allProdSubtypes" formControlName="productSubTypeId" ngDefaultControl   [value]="option.id">{{option.productSubType}}</ion-select-option>
            </ion-select>
          </ion-item>

          
          <ion-button color="apppersonalized" size="large" type="submit" expand="block">
            <h3 style="color:white">create</h3>
          </ion-button>
        </form>

但是当我调用触发创建的 mtehod 以查看是什么带来了这种形式时，引用绑定 value[value] 的值是 null：

createimage(event) {
   
    const {url, productSubTypeId}= this.createImgForm.value;
    console.log(this.createImgForm.value);

    
  }

因此我不知道还能做什么。我曾尝试使用 [ngValue]，但 IONIC 不接受它。

我正在使用响应式表单来检索此 html 的值，因此：


import { ModalController } from "@ionic/angular";
import { HttpsService } from "./../../services/https.service";
import { Validators } from "@angular/forms";
import { FormBuilder } from "@angular/forms";
import { FormGroup, FormControl } from "@angular/forms"; //imports
import { Component, OnInit } from "@angular/core";
import { Store } from "@ngrx/store";
import { GlobalAppState } from "src/app/globalReducer.reducer";
import { AllProductsSubType } from "src/app/interfaces/interfaces.interface";

@Component({
  selector: "app-create-image-modal",
  templateUrl: "./create-image-modal.component.html",
  styleUrls: ["./create-image-modal.component.scss"],
})
export class CreateImageModalComponent implements OnInit {
  createImgForm: FormGroup;
  defaultImage: string = "/assets/defaultUser.png";
  allProdSubtypes: any;
  constructor(
    private formBuilder: FormBuilder,
    private httpService: HttpsService,
    private mdlCtrl: ModalController,
    private stateStore: Store<GlobalAppState>
  ) {}

  ngOnInit() {
    this.createImgForm = this.formBuilder.group({
      url: ["", Validators.required],
      productSubTypeId: [null, Validators.required],
    });
 }
}

标签： angularionic-frameworkselect

解决方案

我想您应该将您的 formControlName 移动到 ion-select，原因是从要显示在表单构建器上的选项中检索信息的那个。祝你好运

推荐阅读