How to show a dynamic table with a dropdown in angular and how to display each row in a different div

Question

Here I get below dynamic data

[
    { 
        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']
    }
];

And here I can display this dynamic data in a table using angular 2 *ngFor , but here the problem I came across is:

• How to display drop-down lists in a dynamic table in my dynamic data, I want to display the “missions” field as a drop-down list so that the user can select a drop-down menu.

• I am currently displaying the above dynamic table in divOne. How can I click it in divTwo? I mean another div that is empty here. I want to select a row or any row that I select, I want to send it to an empty div, how to perform these actions.

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>

, , "". , , , DIV

Answer 1

Table . *ngFor <tr> .

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

. , addToAnotherTable(i), .

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

, .

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

. secondaryTable.

, addToAnotherTable . , 2 1,

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

...

stackblitz: https://stackblitz.com/edit/angular-w2m94j

Answer 2

.

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

Answer 3

, :

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

html :

<option *ngFor="let mission of missions"

Answer 4

, , :

• , checkbox value id .
• click , .
• , splice , . push.
• , , div .
• *ngIf , .
• , div , splice , .

, , - , plnkr stackblitz, .

. . .

Answer 5

Blitz,

.

• , .

Answer 6

ng-template . . / .

, .

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

, . - , , , .

You’ll learn how to style your page to create a drop-down list here.