Question

我正在尝试创建列表：

<div class="ressources" *ngFor="let ressource of ressources">
      <div class="ressource">
        <h2 class="ressourceReferenceClient">{{ressource.referenceClient}}</h2>
        <h2 class="ressourceNom">{{ressource.nom}}</h2>
        <h2 class="ressourcePrenom">{{ressource.prenom}}</h2>
        <h2 class="ressourceEquipe">{{ressource.Equipe.nom}}</h2>
        <h2 class="ressourceNbCompetence">{{ressource.getCompetence().length}}</h2>
        <h2 class="ressourceActif">{{ressource.isActif()}}</h2>
        <h2 class="ressourceActifAsBackUp">{{ressource.isActifAsBackUp}}</h2>
        <h2 class="ressourceDateEntree">{{ressource.getDateEntree()}}</h2>
        <h2 class="ressourceDateSortie">{{ressource.getDateSortie()}}</h2>
      </div>
    </div>

在这里我可以选择此列表中的一个项目，然后使用按钮将从该项目中恢复的信息发送到另一个页面。可能吗？而且您能给我一些建议以实现它吗，我实际上是在学习有角度的知识。

Answer 1

据我了解，您正在执行此步骤（请参阅代码注释）

<div class="ressources" *ngFor="let ressource of ressources"> // creating multiple divs with class ressources
      <div class="ressource">
        <h2 class="ressourceReferenceClient">{{ressource.referenceClient}}</h2>
        <h2 class="ressourceNom">{{ressource.nom}}</h2>
        <h2 class="ressourcePrenom">{{ressource.prenom}}</h2>
        <h2 class="ressourceEquipe">{{ressource.Equipe.nom}}</h2>
        <h2 class="ressourceNbCompetence">{{ressource.getCompetence().length}}</h2>
        <h2 class="ressourceActif">{{ressource.isActif()}}</h2>
        <h2 class="ressourceActifAsBackUp">{{ressource.isActifAsBackUp}}</h2>
        <h2 class="ressourceDateEntree">{{ressource.getDateEntree()}}</h2>
        <h2 class="ressourceDateSortie">{{ressource.getDateSortie()}}</h2>
      </div>
    </div>

您可以做的是添加一个click事件，您将ressource对象传递到组件内部的方法。例如这样的

<div class="ressources" *ngFor="let ressource of ressources"> // creating multiple divs with class ressources
      <div class="ressource" (click)="yourMethod(ressource)"> // click event here
        <h2 class="ressourceReferenceClient">{{ressource.referenceClient}}</h2>
        <h2 class="ressourceNom">{{ressource.nom}}</h2>
        <h2 class="ressourcePrenom">{{ressource.prenom}}</h2>
        <h2 class="ressourceEquipe">{{ressource.Equipe.nom}}</h2>
        <h2 class="ressourceNbCompetence">{{ressource.getCompetence().length}}</h2>
        <h2 class="ressourceActif">{{ressource.isActif()}}</h2>
        <h2 class="ressourceActifAsBackUp">{{ressource.isActifAsBackUp}}</h2>
        <h2 class="ressourceDateEntree">{{ressource.getDateEntree()}}</h2>
        <h2 class="ressourceDateSortie">{{ressource.getDateSortie()}}</h2>
      </div>
    </div>

然后在组件ts文件中，您可以执行以下操作：

@ViewChild(Child) childElement:Child;; // this is the component you want to pass the data to it is a child component

方法内部

yourMethod(ressources: any){
this.childElement.methodToParseTheRessource(ressources); // this method has to be defined in your child component
}

如果要将值从子级传递到父级，请研究Angular中的@Output选项。您可以在这里了解更多有关它们的信息：https://www.concretepage.com/angular-2/angular-2-input-and-output-example。

否则，我建议您阅读一个教程，以了解角度组件工作原理的基础。希望这会有所帮助。

是否可以使用Angular在显示的列表内选择元素

1 个答案: