typescript - วิธีการแสดงตารางแบบไดนามิกพร้อมเมนูแบบเลื่อนลงใน Angular และวิธีการดันแต่ละแถวไปยัง div อื่น

นี่ฉันได้รับด้านล่างนี้เป็นข้อมูลแบบไดนามิก

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

และที่นี่ฉันสามารถแสดงข้อมูลไดนามิกนี้ในตารางโดยใช้ angular 2 *ngFor แต่ปัญหาที่ฉันพบคือ:

1. วิธีในการแสดง Dropdowns ในตารางไดนามิกที่นี่ ในข้อมูลไดนามิกของฉัน ฉันต้องการแสดงฟิลด์ "missions" เป็น dropdown เพื่อให้ผู้ใช้สามารถเลือกจาก dropdown ได้

2. ปัจจุบันฉันกำลังแสดงตารางไดนามิกข้างต้นใน divOne ฉันจะส่งมันไปยัง divTwo ได้อย่างไร หมายถึง Div อื่นที่ว่างอยู่ตรงนี้ ฉันต้องการเลือกแถว หรือไม่ว่าจะเลือกแถวใด ฉันต้องการส่งมันไปยัง div ว่าง ฉันจะทำการกระทำเหล่านี้ได้อย่างไร

ด้านล่างนี้คือโค้ด 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>

ด้านบนคือโค้ดของฉัน ที่นี่ฉันกำลังดึงข้อมูลแบบไดนามิก ยกเว้น "missions" ฉันไม่รู้ว่าจะสร้าง dropdown ในตารางไดนามิกได้อย่างไร หมายถึงในแต่ละแถว และวิธีเลือกรายการแต่ละแถว & เลือกทั้งหมดแล้วส่งไปยัง div อื่น

คำตอบ #1

คุณสามารถวนซ้ำในอาร์เรย์ Table และสามารถสร้างตารางแรกของคุณได้ directive เชิงโครงสร้าง *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

คำตอบ #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>

ตัวอย่างที่ใช้งานได้