Question

我正在尝试使用角度模板中的属性。它不起作用，我无法弄清楚原因。我在这里建立了一个例子：

https://github.com/Fulkerson/angular-property

这是Tour of Heroes的例子。我的commit添加了propname属性，它只返回name并在仪表板（主页）中使用它。

基本上我想要做的是添加多个以不同方式处理字段的属性。但是为什么我不能使用模板中的属性，以及如何以另一种方式完成我想做的事情呢？

Answer 1

<script type="text/javascript"> //<![CDATA[ (function() {var fn = function() {$get("MainContent_ToolkitScriptManager1_HiddenField").value = '';Sys.Application.remove_init(fn);};Sys.Application.add_init(fn);})(); var Page_ValidationActive = false; if (typeof(ValidatorOnLoad) == "function") { ValidatorOnLoad(); } function ValidatorOnSubmit() { if (Page_ValidationActive) { return ValidatorCommonOnSubmit(); } else { return true; } } //]]> </script>方法返回的数据是普通的JSON对象（没有你在Hero类中定义的getter）。如果要使用类中定义的getter，则必须返回实数heroService.getHeroes实例的数组。

1 /为方便起见，我们在app / hero.ts中为Hero类添加了一个构造函数

Hero

2 /而不是从heroService返回普通的js数据，我们映射以获取dashboard.component.ts中的Hero实例数组

  constructor ({id,name} = {id: undefined, name: undefined}) {
    this.id = id;
    this.name = name;
  }

和田田！

Here is the stackblitz created upon your github repo

Answer 2

嗯，问题在于，虽然您要向Hero课程添加新的getter，但在仪表板中列出了来自该服务的英雄。问题是该服务正在模拟数据，而且该数据实际上是一个简单的对象数组（在in-memory-data.service.ts中定义）：

const heroes = [
      { id: 11, name: 'Mr. Nice' },
      { id: 12, name: 'Narco' },
      { id: 13, name: 'Bombasto' },
      { id: 14, name: 'Celeritas' },
      { id: 15, name: 'Magneta' },
      { id: 16, name: 'RubberMan' },
      { id: 17, name: 'Dynama' },
      { id: 18, name: 'Dr IQ' },
      { id: 19, name: 'Magma' },
      { id: 20, name: 'Tornado' }
    ];

在原始示例中，这无关紧要，因为Hero类基本上用作接口或类型注释。但是，您正在提供该类方法，但这些方法在数组中不存在。

因此，基本上，您的模板试图从此数组的项目中访问propname属性。如您所见，该属性为undefined。因此，您在页面中看不到该名称。要避免这种情况，只需更改数组的定义：

const heroes = [
      Object.assign(new Hero(), { id: 11, name: 'Mr. Nice' }),
      ...
    ];

（您也可以为Hero提供带参数的构造函数，并使用它代替Object.assign）。这样，您将获得一组真正的Hero个对象。

在角度模板中使用类属性

2 个答案: