Angular 16中如何获取模型数组属性的单个指定值？

问题描述 #

定义了如下TypeScript类：

export class DayOffer {
  private id: number;
  private day: string;
  private offers: string[];

  constructor(id: number, day: string, offers:string[]) {
    this.id = id;
    this.day = day;
    this.offers = offers;
  }
}

同时创建了该类的实例数组：

offers: DayOffer[] = [
  new DayOffer(1, "Maandag", ["Stoofvlees"]),
  new DayOffer(2, "Dinsdag", ["Hamburgers","Gehakt"]),
  new DayOffer(4, "Donderdag", ["Stoofvlees","Gehakt"]),
  new DayOffer(5, "Vrijdag", ["Hamburgers","Kotelettengebraad"]),
  new DayOffer(6, "Zaterdag", ["Schnitzels","Kotelettengebraad"]),
];

在模板中可以通过{{offer["offers"]}}调用整个offers数组，但尝试{{offer["offers[1]"]}}获取单个指定值时无效。

解决方案 #

1. 修正属性访问语法 #

offer["offers[1]"]的写法错误，它会把字符串"offers[1]"当作属性名去查找，而非先获取offers数组再访问索引为1的元素。正确写法有两种：

• 点语法+数组索引：{{offer.offers[1]}}
• 方括号语法嵌套：{{offer["offers"][1]}}

2. 解决私有属性的访问限制 #

由于DayOffer类中的offers是私有（private）属性，在模板（如Angular模板）中无法直接访问私有成员，需做以下调整之一：

方案A：将属性改为公共（public）

直接在构造函数中声明公共属性，简化代码：

export class DayOffer {
  constructor(
    public id: number,
    public day: string,
    public offers:string[]
  ) {}
}

方案B：添加getter方法

保留私有属性，通过getter暴露访问接口：

export class DayOffer {
  private id: number;
  private day: string;
  private _offers: string[];

  constructor(id: number, day: string, offers:string[]) {
    this.id = id;
    this.day = day;
    this._offers = offers;
  }

  get offers(): string[] {
    return this._offers;
  }
}

完成上述调整后，即可在模板中通过{{offer.offers[1]}}正常访问嵌套数组的单个元素。

内容的提问来源于stack exchange，提问作者Mathias Van Langendonck