* ngДля не работает html, даже если переменная существует - PullRequest
Новая
       0

* ngДля не работает html, даже если переменная существует

0 голосов
/ 28 февраля 2020

Это должно быть просто c, но я почему-то борюсь

table.component.ts 

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-table',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.css']
})
export class TableComponent implements OnInit {
  tableTitle = 'Table';
  tableHeaders = [
    'Project',
    'Budget',
    'Status',
    'Users',
    'Completion',
    'Actions'
  ];

  constructor() { }

  ngOnInit(): void {
  }

}

table.component. html

 <table class="table align-items-center table-flush">
    <thead class="thead-light">
       <tr *ngFor="let header of tableHeaders">
          <th scope="col">{{header}}</th>
       </tr>
    </thead>
....

ничего не показывает .... Я попытался добавить заголовки с некоторыми значениями c, например <th scope="col"> Hello world </th>, и работает нормально .... также попытался напечатать что-то вроде 

<table class="table align-items-center table-flush">
  <thead class="thead-light">
    <tr>
      <th scope="col">{{tableHeaders[0]}}</th>
      <th scope="col">{{tableHeaders[1]}}</th>
      <th scope="col">{{tableHeaders[2]}}</th>
   </tr>
</thead>

и снова работает нормально, так что переменная присутствует в html ..... но при попытке вставить его через * ng для ничего не показывает ... что я делаю не так?

Ответы [ 2 ]

2 голосов
/ 28 февраля 2020

Table.component. html код, который вы используете, имеет повтор (* ngFor) на неправильном элементе - вы создаете несколько tr - каждый с одним th.

Вы должны иметь * ngFor на th, чтобы создать несколько th's в пределах одного столбца. 

 <table class="table align-items-center table-flush">
    <thead class="thead-light">
       <tr>
          <th scope="col" *ngFor="let header of tableHeaders">{{header}}</th>
       </tr>
    </thead>
 </table>

Я добавил стек https://stackblitz.com/edit/angular-3eevgn - спасибо @Oussail за блиц - я изменил код в соответствии с оригиналом :)

0 голосов
/ 28 февраля 2020

Реализация * ngFor в компонентном файле. html неверна. * ngFor не работает с tr. Вы должны использовать * ngFor на th для создания нескольких th вместо tr. 

<table class="table align-items-center table-flush">
    <thead class="thead-light">
       <tr>
          <th scope="col" *ngFor="let header of tableHeaders">{{header}}</th>
       </tr>
    </thead>
</table>

. Надеюсь, это работает для вас гораздо лучше. Спасибо

...