如何使用Angular将第一张表的数据复制到第二张表？

问题描述

我只想将第一张表的数据（项目和价格）复制到第二张表，并在单击第一张表（项目）时增加数量（第二张表）。我正在使用Angular 9

第一张表：

Code | Item  | Price | Unit  |
1    | Mouse | 500   | Piece |
2    | Wire  | 100   | Piece |

第二张表：

Item | Quantity| Price | 
1    | 2       | 1000  | 
2    | 1       | 100   |

我做了很多工作，但是无法获得任何所需的输出。 可以使用 javaScript / Js / jquery

解决

<table class="table table-hover" id="firstTable">
    <thead class="table-primary">
        <tr>
            <td>Code</td>
            <td>Item</td>
            <td>Unit</td>
            <td>Price</td>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let data of itemList;" id="moveMeIntoMain"
            style="cursor:pointer">
            <td>{{data.itemCode}}</td>
            <td>{{data.itemName}}</td>
            <td><span>{{data.unitId}}</span>{{data.name}}</td>
            <td>{{data.retailRate}}</td>
        </tr>
    </tbody>
</table>


<table class="table table-hover" id="secondTable">
    <thead class="">
        <tr class="table-primary">
            <td>#</td>
            <td>Item</td>
            <td>Price</td>
            <td>Quantity</td>
            <td>Action</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>    
        </tr>
    </tbody>
</table>

Js

$(document).ready(function () {
        var items = [];
        $("#firstTable tr").on("click",function () {
            var newTr = $(this).closest("tr").clone();
            
            $(newButtonHTML).children("button").click(function (e) {
            });
            $(newTr).children("td:last").html("");
            items.push(newTr);
            newTr.appendTo($("#secondTable"));
        });
    })

解决方法

您可以简单地以Angular方式尝试；只需在每行中添加点击处理程序并发送行数据

工作stackblitz

模板文件

refresh

在打字稿文件

中

• 声明一个空的<table> <thead> <th>Code</th> <th>Item</th> <th>Price</th> <th>Unit</th> </thead> <tr *ngFor="let data of firstTableData" (click)="updateSecondTable(data)"> <td>{{ data.Code }}</td> <td>{{ data.Item }}</td> <td>{{ data.Price }}</td> <td>{{ data.Unit }}</td> </tr> </table> <hr> <table *ngIf="secondTableData.length"> <thead> <th>Item</th> <th>Quantity</th> <th>Price</th> </thead> <tbody> <tr *ngFor="let newdata of secondTableData"> <td>{{ newdata.Item }}</td> <td>{{ newdata.Quantity }}</td> <td>{{ newdata.Price }}</td> </tr> </tbody> </table> 数组
• 还有一个方法，该方法首先检查第二个表数组中是否存在该项。如果项目已经存在，则只需更新secondTableData和quantity
• 如果该项目不存在，只需将具有必需列的项目推入第二个表数组中

Component.ts

price