Question

我正在尝试使用ngFor在表中显示数据，但无法获取其中包含数据的对象。我在ngOnInit方法中调用了2个服务，并使用promises将它们的数据合并在一起，但是我无法在html文件的ngFor中获取该对象

html文件

  <table class="table table-hover table-striped">
      <thead>
          <tr>
                  <th>Date/Time</th>
                  <th>Course</th>
                  <th>Location</th>
                  <th>Instructor</th>
                  <th>Enrolled</th>
                  <th>Actions</th>
          </tr>
      </thead>
      <tbody>
          <tr *ngFor="let obj of completeData">
              <td class="trim">{{obj.date}}</td>
              <td class="trim">{{obj.course}}</td>
              <td class="trim">{{obj.location}}</td>
              <td class="trim">{{obj.instructor}}</td>
              <td class="trim">Yes</td>     
              <td class="trim">
                <nb-select>

                  <nb-option value="2">Edit</nb-option>
                  <nb-option value="3">Delete</nb-option>
                  <nb-option value="4">View</nb-option>
                </nb-select>
              </td>
          </tr>
      </tbody>
  </table>

component.ts文件

export class UpcomingClassesComponent implements OnInit {

  times: ClassTimes = new ClassTimes();
  schedule: ClassSchedule = new ClassSchedule();
    classes: any; 
    timing: any;
    data: any;
    completeData: any;


  constructor(private router:Router,
              private _classService: ClassServiceProxy) {

  }

  ngOnInit() {
    let dataPromise = new Promise((resolve) => {
      this._classService.GetClassData()
      .subscribe((result: any) => {
        resolve(result[0]);
      })
    });

    let timesPromise = new Promise((resolve) => {
      this._classService.GetClassTimes()
      .subscribe((result: any) => {
        resolve(result[0]);
      })
    });

    Promise.all([dataPromise, timesPromise])
    .then((values) => {
      //console.log(values);
      //let completeData = { ...values[0], ...values[1]};
      this.completeData = Object.assign({}, values[0], values[1]);
      //console.log(this.completeData);
      //console.log("final results : ", completeData); 
    });


    }
    }

Answer 1

您可能需要强制进行更改检测。试试下面的代码。 NgZone

constructor(private zone: NgZone) {
//...
});

this.zone.run(() => {
  this.completeData = Object.assign({}, values[0], values[1]);
});

无法在角度组件中获取ngFor的对象

1 个答案: