нг не печатает данные

Question

<table>
  <tr>
    <th>name</th>
    <th>price</th>
    <th>avalibalty</th>
  </tr>    

  <tr *ngFor="let n of product">  
    <h1>hi</h1>
    <td>{{n.name}}</td>
    <td>{{n.price}}</td>
    <td>{{n.avaliablity}}</td>  
  </tr>        
</table>

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';

    import { AppRoutingModule } from './app-routing.module';
    import { AppComponent } from './app.component';
    import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

    @NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        BrowserModule,
        AppRoutingModule,
        BrowserAnimationsModule
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule {

      product=[
        {
          'name' : 'mobile',
          'price': '7000',
          'avaliablity' : 'yes'
        },
        {
          'name' : 'tv',
          'price': '25000',
          'avaliablity' : 'yes'
        },
        {
          'name' : 'laptop',
          'price': '50000',
          'avaliablity' : 'yes'
        }
      ];

     }

ngfor не печатает данные. и получить равнину.

Answer 1

** Отредактируйте ваш app.component.ts и удалите product объект формы appModule.ts **

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  product=[
        {
          'name' : 'mobile',
          'price': '7000',
          'avaliablity' : 'yes'
        },
        {
          'name' : 'tv',
          'price': '25000',
          'avaliablity' : 'yes'
        },
        {
          'name' : 'laptop',
          'price': '50000',
          'avaliablity' : 'yes'
        }
      ];
}

Answer 2

таблица должна быть в надлежащем порядке, посмотрите на приведенный ниже код

компонент. html

<table class="table">
  <thead>
    <tr>
      <th></th>
      <th>name</th>
      <th>price</th>
      <th>avalibalty</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let n of product">  
     <td><h1>hi</h1><td>
     <td>{{n.name}}</td>
     <td>{{n.price}}</td>
     <td>{{n.avaliablity}}</td>  
    </tr>
 </tbody>

component.ts

import { Component } from '@angular/core';
@Component({
 selector: 'my-app',
 templateUrl: './app.component.html',
 styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit   {

  public product: any;

ngOnInit(){

  this.product=[
     {
      'name' : 'mobile',
      'price': '7000',
      'avaliablity' : 'yes'
    },
    {
      'name' : 'tv',
      'price': '25000',
      'avaliablity' : 'yes'
    },
    {
      'name' : 'laptop',
      'price': '50000',
      'avaliablity' : 'yes'
    }
  ];
 }
}

если вы хотите показать привет и имя в одном столбце, то вы

<td><h1>hi</h1>{{n.name}}<td> 

Answer 3

Ваш component.html может получить доступ только к тем данным, которые объявлены в вашем component.ts. Поэтому вам нужно переместить объявление products в ваш component.ts.

компонент. html

<table>
  <tr>
    <th>name</th>
    <th>price</th>
    <th>avalibalty</th>
  </tr>    

  <tr *ngFor="let n of product">  
    <td>{{n.name}}</td>
    <td>{{n.price}}</td>
    <td>{{n.avaliablity}}</td>  
  </tr>        
</table>

component.ts

export class MyComponent {

  product = [
    {
      'name' : 'mobile',
      'price': '7000',
      'avaliablity' : 'yes'
    },
    {
      'name' : 'tv',
      'price': '25000',
      'avaliablity' : 'yes'
    },
    {
      'name' : 'laptop',
      'price': '50000',
      'avaliablity' : 'yes'
    }
  ];
}

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

Вам нужно будет что-то сделать с <h1> что вы только что указали в качестве прямого потомка <tr>. Я удалил это из моего примера.