Angular 4中Class与new ClassName()的区别及组件绑定选型咨询

嘿，我来帮你把这几种赋值方式的差异讲明白，再结合你的组件绑定网格的场景说下哪种更合适～

首先先假设你的Product类大概是这样定义的（方便后续说明）：

class Category {
  id: number;
  name: string;
}

class Stock {
  id: number;
  quantity: number;
}

class Product {
  id: number;
  name: string;
  category: Category;
  stocks: Stock[];
}

1. 关于productResponse = new Product();的适用性 #

这种方式是创建了Product类的一个具体实例对象，它拥有Product类定义的所有属性（id、name、category、stocks等），可以直接给这些属性赋值。

如果你的三个网格是围绕单个产品的不同维度数据展开的（比如第一个网格展示产品基本信息，第二个展示该产品的库存列表，第三个展示关联的分类信息），那这种方式完全适配——你只需要给这个实例填充后端返回的产品数据，然后在模板里分别绑定productResponse（基本信息）、productResponse.stocks（库存网格）、productResponse.category（分类网格）即可。这是最适合你绑定网格数据的方式之一。

2. productResponse = Product;与第一种方式的核心区别 #

这种方式是把**Product类本身（构造函数）**赋值给了变量，而不是创建类的实例。简单说，productResponse现在指向的是“创建Product实例的模板”，而不是具体的产品数据。

它和第一种方式的核心差异：

• new Product()得到的是可直接使用的数据对象，你可以访问它的属性、给属性赋值，能直接绑定到模板网格展示；
• Product是类的引用，它本身没有实例的属性（比如你没法直接访问productResponse.name），一般只用在需要动态创建实例的场景（比如const newProduct = new productResponse()），完全不适合直接绑定网格数据。

3. 关于productResponse = Array<Product>[];的说明 #

你这里的写法应该是笔误，正确的TypeScript写法是productResponse: Product[] = [];——这是创建一个空的Product类型数组。

如果你的三个网格中有需要展示多个产品列表的场景（比如第一个网格是产品列表，第二个是选中产品的库存，第三个是分类列表），那这种方式就适合用来存储产品列表数据，你可以把后端返回的产品数组赋值给它，然后用*ngFor（假设是Angular组件）遍历绑定到网格。

总结：哪种方式更优？ #

完全取决于你的网格需求：

• 若要绑定单个产品的详情数据：选productResponse = new Product();，这是最直接的方式；
• 若要绑定多个产品的列表数据：选productResponse: Product[] = [];；
• 绝对不要用productResponse = Product;来绑定网格，它不是数据实例，没法直接用来展示内容。

内容的提问来源于stack exchange，提问作者Mohamed Sahir