时间戳

首页 > 解决方案 > 是否可以使用 Angular 在显示的列表中选择一个元素

angular - 是否可以使用 Angular 在显示的列表中选择一个元素

问题描述

我正在尝试创建一个列表：

<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>

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

标签： angulartypescript

解决方案

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

<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>

您可以做的是添加一个单击事件，在其中将资源对象传递给组件内的方法。例如像这样：

<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 。

否则，我建议通过教程来了解角度组件如何工作的基础知识。希望这可以帮助。

推荐阅读