错误 TS2532 角度:ngIf 条件中未定义的对象

分享于2022年07月17日 angular html typescript 问答
【问题标题】:错误 TS2532 角度:ngIf 条件中未定义的对象(error TS2532 Angluar : object undefined in ngIf condition)
【发布时间】:2022-01-25 20:59:35
【问题描述】:

所以在我的 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 是未定义的。


【解决方案1】:

您能否尝试使用 non-null assertion operator ( ! ) 看看是否可以解决您的问题:

*ngIf="p?.nsold! > 30"

  • 这个成功了,谢谢! :)