Структурированные директивы Angular не работают

Question

Я недавно пытался Angular 9 и получил проблему в структурированных директивах * ngIf и * ng, из-за неработоспособности и отсутствия ошибок в моей консоли. Я также попытался изменить tsconfig. json изменить файл, как показано ниже

     "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true,
    "enableIvy": false
  }

но проблема не решена, это мои версии

Angular CLI: 9.0.5
Node: 12.16.1
OS: win32 x64

Angular:
...
Ivy Workspace:

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.900.5
@angular-devkit/core         9.0.5
@angular-devkit/schematics   9.0.5
@schematics/angular          9.0.5
@schematics/update           0.900.5
rxjs                         6.5.3

и это мой исходный код:

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

@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
  styleUrls: ['./product-list.component.css']
})
export class ProductListComponent implements OnInit {

  productList = 'Product List';
  products: [
    {
      productId: 2,
      productName: 'Garden Cart',
      productCode: 'GDN-0023',
      releaseDate: 'March 18, 2019',
      description: 'description',
      price: 150.00,
      starRating: 4.2,
      imageUrl: 'assest/image/garden-cart.png'
    },
    {
      productId: 2,
      productName: 'Garden Cart',
      productCode: 'GDN-0023',
      releaseDate: 'March 18, 2019',
      description: 'description',
      price: 150.00,
      starRating: 4.2,
      imageUrl: 'assest/image/garden-cart.png'
    }
    ];

  constructor() { }

  ngOnInit(): void {
  }

}

HTML файл

 <div class="table-responsive">
    <table class="table">
      <thead>
      <tr>
        <th>
          <button class="btn btn-primary"> Show Image</button>
        </th>
        <th>Product</th>
        <th>Code</th>
        <th>Available</th>
        <th>Price</th>
        <th>5 Start Rating</th>
      </tr>
      </thead>
      <tbody *ngFor="let product of products">
        <tr >
          <td>{{product.productName}}</td>
          <td>{{product.productCode}}</td>
          <td>{{product.description}}</td>
          <td>{{product.price}}</td>
          <td>{{product.starRating}}</td>
        </tr>
      </tbody>
    </table>
  </div>

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

Answer 1

Ошибка в способе присвоения значения переменной. Angular Переменная должна быть назначена в следующем формате,

products:any=value

Здесь, в этом случае, это должно быть так

 products:any= [
    {
      productId: 2,
      productName: 'Garden Cart',
      productCode: 'GDN-0023',
      releaseDate: 'March 18, 2019',
      description: 'description',
      price: 150.00,
      starRating: 4.2,
      imageUrl: 'assest/image/garden-cart.png'
    },
    {
      productId: 2,
      productName: 'Garden Cart',
      productCode: 'GDN-0023',
      releaseDate: 'March 18, 2019',
      description: 'description',
      price: 150.00,
      starRating: 4.2,
      imageUrl: 'assest/image/garden-cart.png'
    }
    ];