Как отобразить массив объектов в таблице, используя ngFor? - PullRequest
Новая
       11

Как отобразить массив объектов в таблице, используя ngFor?

0 голосов
/ 25 июня 2019

Я пытаюсь отобразить некоторые результаты, собранные в таблице.Я знаю, использовать ngFor или, по крайней мере, это то, что мне показало мое исследование.

Я пытался использовать метод keyvalue, упомянутый в других постах, но это все равно не дает никаких результатов.Я думаю, что это очень простая проблема, я просто скучаю по небольшому компоненту.

Поэтому я создаю [Object Array] с именем 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'])      
    }

мой сервис выглядит так: 

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>

Я пытаюсь получить таблицу, которая выглядит примерно так: 

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

На данный момент я получаю только имена столбцов для отображения.Как я уже говорил, я ссылался на другие посты на эту тему.Я следую за предложениями, упомянутыми там, но это все еще не работает.Я думаю, что есть маленькая, но ключевая часть, которую я забыл.Любая помощь будет оценена.Спасибо

1 Ответ

1 голос
/ 25 июня 2019

keyvalue pipe используется для перебора объектов, а не массивов.повторение массива с *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 {}
...