Question

编辑：在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>

Answer 1

在ngOnInit()中，在您获得必要的数据，即surveylist / surveyData之后，调用方法getSurveyDetail(surveyData[0].surveyId,0) 使用此数据绑定到模板中以及要显示默认数据的位置，还可以根据您的选择突出显示该列表项（编写css类）

.row-highlight{

 background-color: greenyellow;
}

在模板中使用此类

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

在组件类

中分配这些布尔值

itemClicked : boolean []=[];

ngOnInit()中的

设置itemClicked[0]=true;//for default highlight

在click方法中，将该索引的布尔值设置为true

getSurveyDetail(surveyId , index) {
     //reset previous clicks
     itemClicked.fill(false);
     //and set that index as true
     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);
      }
    }
  }

此外，您还需要修改通话(click)="getSurveyDetail(item.id)" 作为(click)="getSurveyDetail(item.id,i)"

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

1 个答案: