ng表示不打印数据

Posted 2021-05-03

<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不打印数据。并变得平淡。

答案

您的component.html仅可以访问在component.ts中声明的数据。因此，您需要将products声明移到component.ts中。

component.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>做一些事情。我已将其从示例中删除。

另一答案

**编辑您的app.component.ts并从appModule.ts **中删除product对象

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'
        }
      ];
}

另一答案

表应以正确的方式看下面的代码

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