如何激活列表的最新元素并传递和显示列表的行数据

编辑：在ngOnInit中进行一些更改后，我可以在调试时看到数据，但仍然无法正常工作 . 在显示第一个调查数据而不是第一个调查数据时突出显示第二个调查 . 虽然两种情况下的指数均为零 . ngOnInit的内容现在看起来像这样 .

this._service.getSurveyData().subscribe(data => {
                   this.surveyData = data;
                   console.log(this.surveyData);
                   this.surveySummary = this.surveyData.details;
                   console.log(this.surveySummary);
                   if(this.surveyData) {
                     console.log("77777777")
                    this.itemClicked[0] = true; // for default highlight
                    this.getSurveyDetail(this.surveyData[0].id, this.surveyData[0].i[![enter image description here][4]][4]d);
                   }

                 }, error => {
                   console.log("error");
                 });

当我登录时，我会得到一份我在列表中显示的调查列表 . 在点击列表的任何一行时，我正在调查ID然后在我的组件中，我正在比较行的调查ID和在JSON中的surveyID，然后获取数据 . 但是我必须默认显示第一行数据 . 一旦蒂莫西提出的方法，但不幸的是它没有按照应有的方式运作 . 当我在ngOnInit中调用getSurveyDettail的方法时，我得到的错误是“无法读取未定义的属性'0'，尽管我在ngOnInit之前调用了构造函数中的surveyList .

调查列表未定义，所以我再次调用该函数，该函数在服务中并订阅数据，以便它可用，但它只是跳过if（this.surveyData）条件 .

itemClicked: boolean[] = [];
  surveyDetail;
  surveyData;
  chartData;
  surveySummary;
  surveyDefaultLayout;
constructor(public _service: SurveyInfoService) 
     this.getSurveyData();

  }

ngOnInit() {
this._service.getSurveyData().subscribe(data => {
                   this.surveyData = data;
                   console.log(this.surveyData);
                   this.surveySummary = this.surveyData.details;
                   console.log(this.surveySummary);
                 }, error => {
                   console.log("error");
                 });
                 if(this.surveyData) {
               this.itemClicked[0] = true; // for default highlight
               this.getSurveyDetail(this.surveyData[0].surveyId, this.surveyData[0].surveyId);
                 };

}

  getSurveyData() {
    this._service.getSurveyData().subscribe(
      data => {
        this.surveyData = data;
        console.log(this.surveyData);
        this.surveySummary = this.surveyData.details;
        console.log(this.surveySummary);
      },
      error => {
        console.log("error");
      }
    );
  }
}
      getSurveyDetail(surveyId, index) {
    this.itemClicked.fill(false);
    this.itemClicked[index] = true;
    console.log(this.surveyData);
    for (let i = 0; i < this.surveyData.length; i++) {
      if (this.surveyData[i].id === surveyId) {
        this.surveyDetail = this.surveyData[i].details;
        this.surveyDefaultLayout = this.surveyData[i]['defaultArrayLayout'];
        this.chartData = this.surveyData[i].columnChart;
        console.log(
          this.surveyDetail,
          this.surveyDefaultLayout,
          this.chartData
        );
      }
    }
  }

<ul class="list-group pull-left">
    <li [ngClass]="{'list-group-item row-highlight': itemClicked[i]}" *ngFor="let item of surveyData; let i=index;" (click)="getSurveyDetail(item.id,i)">{{item.item}}</li>
  </ul>