获取动态 table 的行值

Question

我使用这个 api 创建了一个动态 table : https://bi.syncfusion.com/northwindservice/api/orders

https://jsoneditoronline.org/#left=local.wusodi&right=local.fenuzo

Service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from "@angular/common/http";
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class OrdersService {

  constructor(public http:HttpClient) { }

  getAllItems() {
    return this.http.get(
        "https://bi.syncfusion.com/northwindservice/api/orders"
      )
      
  }
}

HTML 文件

            <table>
                <thead>
                    <tr>
                        <th>Ship City</th>
                        <th>Ship Country</th>
                        <th>UnitPrice</th>
                        <th>UnitPrice</th>
                        <th>Quantity</th>
                        <th>ProductName</th>
                        <th>QuantityPerUnit</th>
                        <!-- <th>UnitPrice (Products)</th> -->
                        <th>UnitsInStock</th>
                        <th>UnitsOnOrder</th>
                    </tr>
                </thead>
                <tr (click)="openModal()" *ngFor="let order of allOrders" [ngStyle]="{'background-color': getColor(order.ShipCountry, order.ShipCity)}">
                
                    <td>{{order.ShipCity}}</td>
                    <td>{{order.ShipCountry}}</td>
                    <td>{{order.UnitPrice}}</td>
                    <td>{{order.Quantity}}</td>
                    <td>{{order.Discount}}</td>
                    <td>{{order.ProductName}}</td>
                    <td>{{order.QuantityPerUnit}}</td>
                    <!-- <td>{{order.UnitPrice (Products)}}</td> -->
                    <td>{{order.UnitsInStock}}</td>
                    <td>{{order.UnitsOnOrder}}</td>

                </tr>
            </table>

TS文件

  getAllOrders(){
    this.ordersService.getAllItems().subscribe((data:any)=>{
      this.allOrders = data.Items;
      console.log("All Items:", this.allOrders);
      this.count = data.Count;
      console.log("Count is:", this.count);
    })  
  }

所以我的问题是 - 如何获取特定行的值？甚至只是点击 console.log 该行。

不幸的是，API 中的对象没有任何可用的唯一 ID。

非常感谢！

Answer 1

<tr (click)="openModal(order)" *ngFor="let order of allOrders" [ngStyle]="{'background-color': getColor(order.ShipCountry, order.ShipCity)}">


openModel(order):void{   console.log(order) }

当你通过订单点击方法时，我们将获得行值，然后你将编写逻辑

获取动态 table 的行值

Getting row value of a dynamic table

observable

typescript

angular