Question

我正在使用外部API来检索正在开发的Ionic应用程序中表单的字段。然后，我从此表单中收集信息，以创建一个新对象，该对象将被发送到API以进行记录。

其中一组字段（称为方法）的条目数可以是可变的，因此我已经能够使用* ngFor =指令显示这些字段。但是我在尝试从中收集信息时遇到问题。这是我的代码：

来自new-trip.html：

<ion-item>
  <ion-label>Justification</ion-label>
  <ion-select [(ngModel)]="newTrip.justification">
    <ion-option *ngFor="let tripFieldJustification of tripFieldJustifications" value="{{tripFieldJustification.id}}">{{ tripFieldJustification.description }}</ion-option>
  </ion-select>
</ion-item>


<ion-item-divider color="light">Travel Time</ion-item-divider>
<ion-item *ngFor="let tripFieldMethod of tripFieldMethods">
  <ion-label floating>Hours travelled by {{ tripFieldMethod.method }} {{ tripFieldMethod.id }}</ion-label>
  <ion-input type="text" type="number" [(ngModel)]="newTripHours[tripFieldMethod.id]" value="0"></ion-input>
</ion-item>

从相应的new-trip.ts：

@Component({
  selector: 'page-new-trip',
  templateUrl: 'new-trip.html'
})
export class NewTripPage {
  logOut: any;
  tripFields: any;
  tripFieldMethods: any = [];
  tripFieldGenerals: any = [];
  tripFieldPurposes: any = [];
  tripFieldJustifications: any = [];
  postAddType: any;
  postPreviousPage: any;
  newTrip: any = {};
  newTripHours: any = {};
  methods: any;
  currentYear: any;
  constructor(public navCtrl: NavController, public navParams: NavParams, public logOutService: LogOutService, public travelTrackerService: TravelTrackerService, public alertCtrl: AlertController) {
    this.logOut = logOutService;
    this.currentYear = new Date().getFullYear();
    this.postAddType = navParams.get('addType');
    this.postPreviousPage = navParams.get('previousPage');
    travelTrackerService.getTripFields().then((response) => {
      this.tripFields = response;
      this.tripFieldMethods = this.tripFields['method'];
      this.tripFieldGenerals = this.tripFields['general'];
      this.tripFieldPurposes = this.tripFields['purpose'];
      this.tripFieldJustifications = this.tripFields['justification'];
    });
  }

在下面的代码中，将对齐属性绑定到newTrip.justification毫无问题。但是，我无法将“方法”输入字段绑定到任何对象，因此不断出现以下错误：

NewTripPage.html:153 ERROR TypeError: Cannot read property '0' of undefined
    at Object.eval [as updateDirectives] (NewTripPage.html:153)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:14697)
    at checkAndUpdateView (core.js:13844)
    at callViewAction (core.js:14195)
    at execEmbeddedViewsAction (core.js:14153)
    at checkAndUpdateView (core.js:13845)
    at callViewAction (core.js:14195)
    at execComponentViewsAction (core.js:14127)
    at checkAndUpdateView (core.js:13850)
    at callViewAction (core.js:14195)

我知道此问题与数组有关。我将如何获得这些动态变化的字段以绑定到对象？

我对Angular非常陌生，如果有人能够提供帮助，我将非常感谢。谢谢。

Answer 1

是的，您是对的，问题出在数组中。您必须像这样编写数组。

private partnerArray: Array<{
  id: number;
  imageUrl: string;
  name: string;
  email: string;
}> = [];

并像这样填充此数组。

  this.partnerArray.push({
      id: query[i].id,
      imageUrl: "data:image/*;base64," + query[i].image_small,
      name: query[i].name == false ? "N/A" : query[i].name,
      email: query[i].email == false ? "N/A" : query[i].email
    });

在ts文件中就是这样。现在，您可以像这样在.html文件中访问它。

    <ion-item>
        <ion-label>Justification</ion-label>
            <ion-select [(ngModel)]="newTrip.justification">
            <ion-option *ngFor="let partner of partnerArray" value="{{partner.id}}">{{ partner.name }}</ion-option>
        </ion-select>
    </ion-item>

就是这样。希望对您有帮助

Angular / Ionic Framework-尝试绑定到* ngFor循环中的对象

1 个答案: