Question

我想根据选择的片段来显示离子幻灯片中某个对象的详细信息。在这里，我有一个使用NavParam从另一个组件传递过来的object（obj）。 “条件”是“ myDetails”中的字段之一，它包含值（不适合，适合和合格）

// this is from my ts file
import { Component, ViewChild } from '@angular/core';
import { IonicPage, NavController, NavParams, Loading, LoadingController, Slides } from 'ionic-angular';
.....
.....


@IonicPage()
@Component({
  selector: 'page-manager-details',
  templateUrl: 'manager-details.html',
})
export class CrewManagerDetailsPage {

  @ViewChild(Slides) slides: Slides;


  constructor(public navCtrl: NavController, private crewProvider: 
  CrewProvider, public navParams: NavParams,
    public loadingCtrl: LoadingController, public utils: UtilsModule) {

      this.obj = this.navParams.data.myDetails;
    console.log(this.navParams.data);}      }


ionViewDidLoad() {
this.obj = this.navParams.data.myDetails;

      for (let newData of this.obj ) {

        if (newData.condition == 'unfit') {
          this.canBeRostered.push(newData);
        }
        if (newData.condition == 'Fit') {
          this.notMedicalFit.push(newData);
        }
        if (newData.condition == 'Qualified') {
          this.notQualified.push(newData);
        }
        if (newData.condition == 'Default') {
          this.default.push(newData);
        }
      };
}

这是我的html文件

<div>
      <ion-slides  pager="true">
        <ion-slide *ngFor ="let dtls of obj">
          <h2>lets </h2>
          <h2>({{dtls .name}})</h2>
          <h3>Grade:
            <b>{{dtls .grade}}</b>
          </h3>
          <h3>Sign On Date:
            <b>{{dtls .date}}</b>
          </h3>
        </ion-slide>
      </ion-slides> 
    </div>

我想在离子幻灯片中查看我的对象（obj）详细信息的列表。现在，当我运行我的应用程序时，我可以清楚地看到该幻灯片根据我的object（obj）返回的数据生成了正确数量的slides（7），但是，这些数据没有显示在幻灯片上。

Answer 1

点(.)和对象dtls对象之间有空格，因此只需替换下面的代码即可。

<div>
      <ion-slides  pager="true">
        <ion-slide *ngFor ="let dtls of obj">
          <h2>lets </h2>
          <h2>({{dtls.name}})</h2>
          <h3>Grade:
            <b>{{dtls.grade}}</b>
          </h3>
          <h3>Sign On Date:
            <b>{{dtls.date}}</b>
          </h3>
        </ion-slide>
      </ion-slides> 
    </div>

希望这会有所帮助！

如何在离子幻灯片中查看对象（从ts文件）

1 个答案: