所以在我的 Angular 项目中，我有两个共享文件分别称为 Posters.ts 和 the-Posters。我首先定义了Posters类，并在-Posters中做了一个表格。

海报.ts

export class Posters {
    id? : string ; 
    url? : string;
    categories ? : string
    nsold? : Number;
    posterA? : boolean;
    constructor (args : Posters ={}) {
        this.id=args.id;
        this.url=args.url;
        this.categories = args.categories ;
        this.nsold = args.nsold;
        this.posterA=args.posterA;
    }
}

the-posters.ts

import { Posters } from "./posters";
export const POSTERS : Posters [] = [
{
    id : '1',
    url : '../../assets/Posters/manufacturing/p1.jpg',
    categories :"MANUFACTURING",
    nsold : 15,
    posterA : true
},
{
    id : '2',
    url : '../../assets/Posters/IT/p2.jpg',
    categories :"IT",
    nsold : 30,
    posterA : true
},
{
    id : '3',
    url : '../../assets/Posters/manufacturing/p3.jpg',
    categories :"MANUFACTURING",
    nsold : 35,
    posterA : true
}
]

然后我将它导入到一个名为 home-user 的组件中。并尝试了 home-user.component.html 中的信息

home-user.component.ts

import { Component, OnInit } from '@angular/core';
import { POSTERS } from '../../shared/models/the-posters';
import { Posters } from '../../shared/models/posters';

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

  tabPosters : Posters [] = POSTERS;

  ngOnInit(): void {
  }

  

}

home-user.component.html

 Manufacturing

    
    
    
        
    

 IT

    
    
    
        
    

 Best Selling

    
    
    
        
    

并且错误在 * ngIf=" p.nsold >30 "> 。根据 Angular 编译器 p.nsold 是未定义的。