Html 如何使用ngFor在表中显示对象数组？_Html_Angular6_Ngfor

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

html angular6

Html 如何使用ngFor在表中显示对象数组？,html,angular6,ngfor,Html,Angular6,Ngfor,我试图显示我在表格中收集的一些结果。我知道如何使用NGO，至少我的研究表明了这一点我曾尝试使用其他帖子中提到的keyvalue方法，但仍然没有得到任何结果。我认为这是一个超级简单的问题，我只是缺少一个小的组成部分所以我创建了一个名为userResults的[Object Array]，它看起来像 [ {key: 'example@example.com', value: 'message'} ] | User Email | Result |

我试图显示我在表格中收集的一些结果。我知道如何使用NGO，至少我的研究表明了这一点

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

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

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

|       User Email       |       Result       |
|  example@example.com   |       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)
    }


}

<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>

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

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)
    }


}

<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>

到目前为止，我只获取要显示的列名。正如我之前所说，我已经参考了其他关于这个话题的帖子。我正在遵循那里提到的建议，但它仍然不起作用。我想有一个小的，但关键的部分我忘记了。任何帮助都将不胜感激。感谢

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

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

还有一件事是；头体和样式标记不应用于角度模板中。您应该将css样式作为内联样式放置在component.ts文件中

@组成部分{ 选择器：我的应用程序， templateUrl:./my.component.html，风格：[ ` 桌子 th，运输署{ 边框：1px纯黑；对齐：居中； } ` ] } 导出类MyComponent{} 或者在一个名为component.css的单独文件中添加该文件，并在component.ts文件中引用该文件

@组成部分{ 选择器：我的应用程序， templateUrl:./my.component.html，样式URL:[./my.component.css] } 导出类MyComponent{}

您编辑标题以显示对象，但在问题中，您试图显示对象数组。那是哪一个呢？