Question

我试图显示一些我收集在表格中的结果。我知道使用ngFor或至少是我的研究向我展示的内容。

我已经尝试使用其他帖子中提到的keyvalue方法，但这仍然无法产生任何结果。我认为这是一个非常简单的问题，我只是缺少一小部分。

因此，我创建了一个名为[Object Array]的{{1}}，看起来像

userResults

它是在我的结果组件中创建的，看起来像：

[
{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'])      
    }

我通过在不同函数中通过一系列if / else语句创建该对象，并根据需要向objct添加值。在该功能结束时，我导航到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) } }页面，该页面的html如下所示：

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

到目前为止，

我仅能显示列名称。就像我之前说过的，我已经参考了有关该主题的其他文章。我正在按照此处提到的建议进行操作，但是仍然无法正常工作。我认为我忘记了一个很小但很关键的部分。任何帮助，将不胜感激。谢谢

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标签不应在角度模板中使用。并且您应该将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在表中显示对象数组？

1 个答案: