如何使用 ngFor 在 table 中显示对象数组？

Question

我正在尝试显示我在 table 中收集的一些结果。我知道使用 ngFor 或者至少这是我的研究告诉我的。

我尝试使用其他帖子中提到的keyvalue方法，但仍然没有呈现任何结果。我认为这是一个超级简单的问题，我只是缺少一个小组件。

所以我创建了一个名为 userResults 的 [Object Array] 看起来像

[
{key: 'example@example.com', value: 'message'}
]

它是在我的结果组件中创建的，类似于：

@Component(
{
    selector: 'app-results',
    templateUrl: './results.component.html',
    styleUrls: ['./results.component.css'],
    providers: [ApiService, DataService]
})
export class ResultsComponent implements OnInit
{
    constructor(private _apiService: ApiService, private router: Router, private _dataService: DataService)
    {
        this.userResults = this._dataService.getData();
    }
displayedColumns: string[] = ['User Email', 'Result'];
userResults = [];
employeeCheck(user: string)
    {
        console.log('Completing employee check')

        if (this)
        { 
            this.userResults.push({
                key: user,
                value:  this.messages[3];
            });
            this.createTable();
        }
        else if (this)
        { //Check that NGP exists and is valid
            this.userResults.push({
                key: user,
                value:  this.messages[4];
            });
            this.createTable();
        }
        else if (this)
        { 
            this.userResults.push({
                key: user,
                value:  this.messages[6]
            });
            this.createTable();
        }

        else if (this)
        { 
            this.userResults.push({
                key: user,
                value:  this.messages[5]
            });
            this.createTable();
        }
        else
        { //Don't know what else to do
            this.userResults.push({
                key: user,
                value:  this.messages[7]
            });
            console.log(this.userResults[0].key)
            this._dataService.saveResults(this.userResults);
            this.createTable();
        }
//console.log(this.userResults);

    }


    userCheck(user: string)
    {
        console.log('Checking ', user, ' information.');

        if (this)
        {
            this.userResults.push({
                key: user,
                value:  this.messages[0]
            });
            this.createTable();
        }
        else if (this)
        {
            this.userResults.push({
                key: user,
                value:  this.messages[1]
            });
            this.createTable();
        }
        else if (this)
        {
            this.userResults.push({
                key: user,
                value:  this.messages[2];
            });
            this.createTable();
        }
        else
        {
            this.employeeCheck(user);
        }
    }
createTable()
    {
        console.log(this.userResults)
        console.log('going to results')
        this.router.navigate(['/results'])      
    }

我的服务看起来像：

import { Injectable } from '@angular/core';
import { Observable, Subject, throwError} from 'rxjs';

@Injectable({ providedIn: "root" })
export class DataService {
    private results: any[];
    constructor() { }

    saveResults(someArray){
        console.log('saving results')
        this.results = someArray
        console.log(this.results)
    }


}

我通过在不同的函数中执行一系列 if/else 语句来创建此对象，并根据需要向对象添加值。在该函数结束时，我导航到 /results 页面，该页面的 html 看起来像：

<div class="container" style="text-align:center">
  <br />
  <h1>Results</h1>

  <head>
    <style>
      table,
      th,
      td {
        border: 1px solid black;
        align: center;
      }
    </style>
  </head>
  <body>
    <table style="width:50%" align="center">
      <tr>
        <th *ngFor="let col of displayedColumns">
          {{ col }}
        </th>
      </tr>
      <tr *ngFor="let item of userResults | keyvalue">
        <td>{{ item.key }}</td>
        <td>{{ item.value }}</td>
      </tr>

      <tr></tr>
    </table>
  </body>

我想得到一个看起来像

的 table

|       User Email       |       Result       |
|  example@example.com   |       message      |

截至目前，我只显示要显示的列名。就像我之前说的，我已经参考了有关此主题的其他帖子。我正在按照那里提到的建议进行操作，但仍然无法正常工作。我认为我忘记了一个小而关键的部分。任何帮助，将不胜感激。谢谢

Answer 1

keyvalue 管道用于遍历对象而不是数组。使用 *ngFor 迭代数组不需要任何额外的结构。

<tr *ngFor="let item of userResults">
  <td>{{ item.key }}</td>
  <td>{{ item.value }}</td>
</tr>

应该够用了，其中userResults类似这个

userResults = [
  {key:"example1@example.com", value: "message1"},
  {key:"example2@example.com", value: "message2"}
]

还有一件事； head body 和 style 标签不应在 angular 模板中使用。并且您应该将 css 样式作为内联样式

放在 component.ts 文件中

@Component({
  selector: "app-my",
  templateUrl: "./my.component.html",
  styles: [
    `
      table,
      th,
      td {
        border: 1px solid black;
        align: center;
      }
    `
  ]
})
export class MyComponent {}

或在一个名为 component.css 的单独文件中添加该文件应在您的 component.ts 文件中引用

@Component({
  selector: "app-my",
  templateUrl: "./my.component.html",
  styleUrls: ["./my.component.css"]
})
export class MyComponent {}

如何使用 ngFor 在 table 中显示对象数组？

How to display an Array of Objects in a table using ngFor?

html

angular6

ngfor