web-dev-qa-db-fra.com

Comment afficher le tableau dynamique avec la liste déroulante angulaire et comment Pousser chaque ligne vers un autre div

Ici, je reçois ci-dessous des données dynamiques

[
    { 
        id: 151, 
        name: 'Alan B. Shepard, Jr.', 
        job: 'Astronaut', 
        year_joined: 1959,
        missions: ['MR-3', 'Apollo 14']
    },
    { 
        id: 152, 
        name: 'Virgil I. Grissom', 
        job: 'Astronaut', 
        year_joined: 1959,
        missions: ['MR-4', 'Apollo 1']
    },
    { 
        id: 153, 
        name: 'John H. Glenn, Jr.', 
        job: 'Astronaut', 
        year_joined: 1959,
        missions: ['MA-6','STS-95']
    },
    { 
        id: 154, 
        name: 'M. Scott Carpenter', 
        job: 'Astronaut', 
        year_joined: 1959,
        missions: ['MA-7']
    }
];

Et ici, je peux afficher ces données dynamiques dans un tableau en utilisant angular 2 *ngFor, mais le problème auquel je suis confronté est le suivant:

  1. Comment afficher les listes déroulantes dans le tableau dynamique ici dans mes données dynamiques Je souhaite afficher le champ "missions" sous forme de liste déroulante afin que l'utilisateur puisse sélectionner la liste déroulante.

  2. Actuellement, j'affiche le tableau dynamique ci-dessus dans divOne .Comment puis-je le pousser vers le div? Je veux dire un autre div qui est vide ici. Je veux sélectionner la rangée ou quelle que soit la rangée que je sélectionne. effectuer ces actions

Ci-dessous mon code HTML:

<table class="table" *ngFor=let data of Table>
    <thead>
        <tr>
            <th>id</th>
            <th>name</th>
            <th>job</th>
            <th>year_joined</th>
            <th>missions</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>{{data.id}}</td>
            <td>{{data.name}}</td>
            <td>{{data.job}}</td>
            <td>{{data.year_joined}}</td>
        </tr>
    </tbody>
</table>

Ci-dessus, mon code. Ici, j’obtiens dynamiquement des données, à l’exception de "missions". Je ne sais pas comment afficher la liste déroulante dans un tableau dynamique.

angulartypescriptionic2ionic3
4
Madpop

Vous pouvez effectuer une itération sur le tableau Table et construire votre première table. La directive structurelle *ngFor devrait être sur le <tr> au lieu de la table.

De plus, j'ai attaché un gestionnaire de clics, il sera déclenché une fois que vous aurez cliqué sur tr. 

<table class="table">
    <thead>
        <tr>
            <th>Name</th>
            <th>Job</th>
            <th>Year Joined</th>
            <th>Mission</th>
    </thead>

    <tr *ngFor="let data of Table;let i = index" (click)=addToAnotherTable(i)>

        <td>
            <span>{{data.name}}</span>
        </td>
        <td>
            <span>{{data.job}}</span>
        </td>
        <td>
            <span>{{data.year_joined}}</span>
        </td>
        <td>
          <select>
             <option *ngFor="let mission of data.missions">
                {{mission}}
             </option>
          </select>
        </td>
    </tr>
</table>

Comme vous devez voir votre table maintenant. Lorsque vous cliquez sur une ligne, addToAnotherTable(i) sera activé, ce qui poussera l'index de la ligne cliquée dans un tableau. 

addToAnotherTable(ind){
  this.secondaryTable.Push(ind);
}

Maintenant, ce tableau sera le tableau que nous allons utiliser pour construire une autre table.

    <tr *ngFor="let data of secondaryTable">
        <td>
            <span>{{Table[data].name}}</span>
        </td>
        <td>
            <span>{{Table[data].job}}</span>
        </td>
        <td>
            <span>{{Table[data].year_joined}}</span>
        </td>
        <td>
          <select>
            <option *ngFor="let mission of Table[data].missions">
             {{mission}}
            </option>
          </select>
        </td>
    </tr>

fera une autre table. Comme il parcourt les valeurs de secondaryTable.

Vous voudrez peut-être modifier la fonctionnalité de addToAnotherTable en fonction de vos besoins. Comme si vous vouliez basculer les lignes du tableau 2 au clic de la ligne du tableau 1, vous pourriez utiliser cette fonction.

addToAnotherTable(ind) {
    var index = this.secondaryTable.indexOf(ind);
    if (index > -1) {
      this.secondaryTable.splice(index, 1);
    }
    else{
      this.secondaryTable.Push(ind);
    }
  }

ou vous pourriez vouloir ajouter un tri sur les données et ainsi de suite ...

Voir ce live sur stackblitz:https://stackblitz.com/edit/angular-w2m94j

3
void

Vous pouvez essayer similaire à ceci.

<table class="table">
<thead>
    <tr>
        <th>Name</th>
        <th>Job</th>
        <th>Year Joined</th>
        <th>Mission</th>
</thead>

<tr *ngFor="let data of Table;let i = index">

    <td>
        <span>{{data.name}}</span>
    </td>
<td>
        <span>{{data.job}}</span>
    </td>

<td>
        <span>{{data.year}}</span>
    </td>
    <td>
  <option *ngFor="let mission of data.mission" 
   [selected]="mission.name == 'back'">{{mission.name}}</option>
    </td>
</tr>

Échantillon de travail

3
Eldho

Regardez le code courant ci-dessous

Stack Blitz, Source

Démo

J'ai pris vos données et les ai affichées sous forme de tableau. Ici tu peux

  1. Cliquez pour transférer les lignes d'une table à l'autre
  2. Et être en mesure de choisir de la liste déroulante ainsi
1
Abhijit Kar

ng-template est fait exactement pour votre cas. Essaye le. Dans cet exemple, vous pouvez sélectionner/désélectionner plusieurs missions par élément et les montrer à l'utilisateur sans utiliser d'entrée supplémentaire.

L’avantage de cette façon est que vous aurez plus de facilité à dénommer votre menu déroulant.

HTML

<table class="table" *ngFor="let data of Table">
    <thead>
        <tr>
            <th>id</th>
            <th>name</th>
            <th>job</th>
            <th>year_joined</th>
            <th>missions</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>{{data.id}}</td>
            <td>{{data.name}}</td>
            <td>{{data.job}}</td>
            <td>{{data.year_joined}}</td>
            <td>
              <ng-template ngFor let-mission [ngForOf]="data.missions">
                <p class="mission"
                   [ngClass]="{'selected': data.selectedMissions.indexOf(mission) != -1}"
                   (click)="selectMission(data, mission)">
                  {{mission}}
                </p>
              </ng-template>
            </td>
        </tr>
    </tbody>
</table>

TS

private selectMission(data, mission):void {
  if (!data.selectedMissions)
    data.selectedMissions = new Array();

  if (data.selectedMissions.indexOf(mission) == -1)
    data.selectedMissions.Push(mission);
  else
    data.selectedMissions.slice(data.selectedMissions.indexOf(mission));

  console.log(data.selectedMissions);
}

CSS

p.mission.selected {
  background-color:#F0F;
}

Je n'ai pas essayé mais ça devrait marcher. Si vous voulez rendre quelque chose de plus propre, vous pouvez écrire de nouvelles données au lieu de modifier les données actuelles et jouer avec les prototypes de vos objets.

Vous saurez comment styliser votre page afin de faire une liste déroulante ici

0
Guillaume Le Mière

Le codage pour le scénario ci-dessus prendra un certain temps, je vais donc vous expliquer la procédure à suivre:

  1. Créez une autre colonne dans votre première table pour fournir une variable checkbox permettant de sélectionner chaque ligne ou plusieurs lignes et lier la case à cocher value de à la propriété id de vos données.
  2. Créez un bouton et sur l'événement click, appelez une méthode pour obtenir les identifiants des lignes sélectionnées à partir des valeurs de la case à cocher.
  3. En utilisant les identifiants que vous avez obtenus, utilisez la méthode splice sur le tableau pour supprimer les données du tableau et ajouter ces données à un autre tableau. Vous pouvez ajouter d'autres éléments au tableau à l'aide de la méthode Push.
  4. Créez une table similaire à celle que vous avez dans la variable div deux également.
  5. Utilisez *ngIf sur le deuxième tableau pour afficher ou masquer le tableau en fonction de la longueur du deuxième tableau.
  6. Chaque fois qu'un ajout est fait au deuxième tableau, votre deuxième div le rendra comme une nouvelle ligne et de la même manière puisque vous utilisez la méthode splice sur le premier tableau, les lignes respectives seront supprimées de la première table.

Essayez cette méthode et, si vous rencontrez des problèmes, créez un code plnkr ou stackblitz / afin que je puisse vous aider davantage.

J'ai créé un exemple d'application basé sur votre scénario. Découvrez ce lien . Je vous ai codé et édité.

0
Arjun Panicker

Il suffit d'appeler votre serveur qui renvoie toutes les missions:

['MA-7', 'MA-6','STS-95', 'Apollo 1', 'MR-4'] 

Ensuite, dans le HTML, vous pouvez faire un menu déroulant avec:

<option *ngFor="let mission of missions"

0
Swoox