如何在點擊 Angular 時發送 *ngFor 的參數

Question

我有一個正在運行的 Angular 應用程序，並希望通過點擊 html 模板發送數據：

.ts

columns: [
           { label: 'User Name', key: 'Name' },
           { label: 'User Age', key: 'Age' }
         ]

data: [
    {Name: 'John', Age: 12},
    {Name: 'Sam', Age: 34},
    {Name: 'Jack', Age: 15}
]

onClick(data) {
   console.log(data);
}

html

<div *ngFor="let row of data">
     <div *ngFor="let column of columns" (click)="onClick(row[column.key])">
         {{ row[column.key] }}
      </div>
</div>

但是，我無法獲取數據並獲取未定義的值。 請幫助我

Answer 1

賦值運算符是=到非：

您想將 arrays 分配給列和數據，因此您應該使用=

columns = [
           { label: 'User Name', key: 'Name' },
           { label: 'User Age', key: 'Age' }
         ]

data= [
    {Name: 'John', Age: 12},
    {Name: 'Sam', Age: 34},
    {Name: 'Jack', Age: 15}
]

Answer 2

我做了一些小改動，希望它對你有用。

示例： https://codesandbox.io/s/angular-01wg3

 columns= [ { label: 'User Name', key: 'Name' }, { label: 'User Age', key: 'Age' } ] data= [ {Name: 'John', Age: 12}, {Name: 'Sam', Age: 34}, {Name: 'Jack', Age: 15} ] onClick(data) { console.log(data); }

 <div *ngFor="let row of data"> <div *ngFor="let column of columns" (click)="onClick(row[column.key])"> {{ row[column.key] }} </div> </div>