如何通过Angular / TypeScript中的单击事件循环访问对象

Question

我通过使用Web API获得数据。我在组件中有两个方法，加载next和previous记录。我想通过点击事件从迭代中加载对象数据并显示它。

组件

export class NewResponseComponent implements OnInit {


 private view: BehaviorSubject<ConsulationResponsesIdListDataModel>;
 private responseCurrentState: ResponseCurrentStateDataModel;
 private responses: ConsulationResponsesIdListDataModel;

 private responseData = false;

     constructor(private dataService: ConsultationResponsesListDataService,
  private router: Router,
  private session: SessionStorageService){}

ngOnInit(): void {
  this.view = new BehaviorSubject<ConsulationResponsesIdListDataModel>(null);    
   this.loadData();
}

public loadData():void
{

  this.dataService.getConsultationResponsesList(this.responseCurrentState.consultationId, this.responseCurrentState.responseTypeId, this.responseCurrentState.responsesRequestedStatus)
     .subscribe(data =>{
          this.view.next(data);
          this.responses = data;
          this.responseData = true; 
     });
}

public loadNextResponse():void
{
    console.log("request for next response");
}


public loadPreviousResponse():void
{
  console.log("request for previous response");
}

以下模板显示响应对象中的所有数据，但我想与上面组件中的loadNextResponse（）和loadPreviousResponse（）方法绑定

模板

<div *ngIf='responseData'>
<div *ngFor="let response of responses" class="form-row">
   {{response.responseId}}
</div>

<button class="btn btn-default width-50 mb-xs" (click)="loadNextResponse()">Load Next Response</button>
<button class="btn btn-default width-50 mb-xs" (click)="loadPreviousResponse()">Load Previous Response</button>

我需要实现类似http://jsfiddle.net/h2G64/

的目标

Answer 1

如果我正确理解您的问题，以下代码可能会有效 -

<div>
    <!-- <div *ngFor="let response of responses" class="form-row">
        {{response.responseId}}
    </div> -->
    {{responseItem}}
    <button [disabled]="!count || count <= 0" class="btn btn-default width-50 mb-xs" (click)=" count = count - 1; responseItem = responses[count]">Load Previous Response</button>
    <button [disabled]="!!count && count >= responses?.length - 1" class="btn btn-default width-50 mb-xs" (click)="count = count || 0; count = count + 1; responseItem = responses[count]">Load Next Response</button>
</div>

当您从服务器获得响应时，您必须将第一项分配给responseItem属性，然后按钮点击将接管导航。

  

编辑 - 添加POC的GIF

检查我的POC的以下GIF -

如果我错过了什么，请告诉我。

我希望这会有所帮助：）

Answer 2

我这样做了

组件

NULL

模板

  export class NewResponseComponent implements OnInit {

   private nums:number[] = [0,1,2,3,4,5,6,7,8,9];
   private currentResponseIndex=0;
   private currentResponse;

 public loadNextResponse(responseIndex: string):void
{

    this.currentResponseIndex = parseInt(responseIndex)+1;

    if(this.nums[this.currentResponseIndex]!=null)
    {
      this.currentResponse = this.nums[this.currentResponseIndex];
      console.log("response index  ",this.currentResponseIndex, "    response ", this.currentResponse);
    }
    else
    {
      this.currentResponseIndex = this.currentResponseIndex-1;
      console.log("reach to max length ", this.currentResponseIndex);
    }

}


public loadPreviousResponse(responseIndex: string):void
{

  this.currentResponseIndex = parseInt(responseIndex) - 1;
  if(this.currentResponseIndex<0)
  {
    this.currentResponseIndex = 0;
    console.log("reach to min length");
  }
  else
  {
    this.currentResponse = this.nums[this.currentResponseIndex];
    console.log("response index  ",this.currentResponseIndex, "    response ", this.currentResponse);
  }
}