Angular-* ngFor：从ts文件的索引中传递i

Question

我试图将索引从ngFor传递到我的ts文件，但没有成功。我实际上不知道该怎么做。 有人可以告诉我如何将索引值从html传递到ts文件吗？ 我认为使用@Input将是te解决方案，但是什么也没有发生... 谢谢。

我的HTML：

<div *ngFor="let question of questions | async; index as i">{{question.libelle}}
     <div class="row text-left options">
        <div class="col-md-6" *ngFor="let reponse of reponses | async">
          <div class="option">
            <label class="" [attr.for]="reponse.id">
                <input type="checkbox" [(ngModel)]="reponse.Selected"/>
                {{reponse.libelle}}
            </label>
          </div>
        </div>
      </div>
      {{i}}
    </div>

我的TS：

@Injectable()


@Component({
  selector: 'app-java',
  templateUrl: './java.component.html',
  styleUrls: ['./java.component.sass']
})
export class JavaComponent implements OnInit {
  @Input()  i : any;
  questions :any = [];
  reponses :any = [];
  constructor(private questionnaireService: QuestionnaireService) { }

  ngOnInit() {
    this.questions = this.questionnaireService.getQuestion();
    this.reponses = this.questionnaireService.getReponse(this.i);
  }  

}

Answer 1

您似乎对索引变量上下文以及可观察变量的工作方式有基本的误解。在这里可以帮助您解决问题的是将您的组件分为两个组件，一个组件用于管理和显示整个列表，另一个组件用于管理和显示子列表

父级（app-java）：

HTML：

<div *ngFor="let question of questions | async; index as i">{{question.libelle}}
 <div class="row text-left options">
    <app-java-child [i]="i"></app-java-child>
  </div>
  {{i}}
</div>

TS：

@Component({
  selector: 'app-java',
  templateUrl: './java.component.html',
  styleUrls: ['./java.component.sass']
})
export class JavaComponent implements OnInit {
  questions :any = [];
  constructor(private questionnaireService: QuestionnaireService) { }

  ngOnInit() {
    this.questions = this.questionnaireService.getQuestion();
  }  

}

和孩子：

HTML：

<div class="col-md-6" *ngFor="let reponse of reponses | async">
   <div class="option">
     <label class="" [attr.for]="reponse.id">
            <input type="checkbox" [(ngModel)]="reponse.Selected"/>
            {{reponse.libelle}}
     </label>
   </div>
</div>

TS：

@Component({
  selector: 'app-java-child',
  templateUrl: './java-child.component.html',
  styleUrls: ['./java-child.component.sass']
})
export class JavaChildComponent implements OnInit {
  @Input()  i : any;
  reponses :any = [];
  constructor(private questionnaireService: QuestionnaireService) { }

  ngOnInit() {
    this.reponses = this.questionnaireService.getReponse(this.i);
  }  

}

通过这种方式，您可以从初始ngFor中获取索引并将其作为输入输入给子级，以便子级可以负责构建自己的响应数组。

Answer 2

您可以通过3个步骤实现这些目标

  

  

1. 将currentIndex保留在ts文件中

  

2. 从html设置currentIndex

  

3. 从* ngFor

调用getter方法   

以ts

@Injectable()
@Component({
  selector: 'app-java',
  templateUrl: './java.component.html',
  styleUrls: ['./java.component.sass']
})
export class JavaComponent implements OnInit {
  @Input()  i : any;
  questions :any = [];
  reponses :any = [];
  constructor(private questionnaireService: QuestionnaireService) { }

  ngOnInit() {
    this.questions = this.questionnaireService.getQuestion();
  }  

   //Track the current Index
   public currentIndex;

   //Current Index Setter
   setCurrentIndex(index){
       this.currentIndex = index;
   }

  //Getter for response which will use currentIndex
  get responses(){
    return this.questionnaireService.getReponses(this.currentIndex)
  }

}

in html

   <div *ngFor="let question of questions | async; index as i">{{question.libelle}}
         <div class="row text-left options" #>

            {{setCurrentIndex(i)}} <-- Set the current Index -->

            <div class="col-md-6" *ngFor="let reponse of responses | async">
              <div class="option">
                <label class="" [attr.for]="reponse.id">
                    <input type="checkbox" [(ngModel)]="reponse.Selected"/>
                    {{reponse.libelle}}
                </label>
              </div>
            </div>
          </div>
          {{i}}
 </div>

  

注意：由于您使用的是异步管道，请确保所有结果都是可观察的。