javascript - 在订阅响应中初始化的 Angular 4 类型 Item 的组件变量没有在 Item 类中定义的方法

Question

我正在为一个新的内部应用程序开发一个 Angular 项目。虽然我在 AngularJS 方面有一些经验，但在 Angular 2+ 方面我几乎是个新手。我遇到的一个无法理解的问题涉及在 ngOnInit block 中的订阅回调内部设置一些组件类变量。我的细节会有点抽象，但我希望它提供足够的背景来传达问题。

我有一个项目类型定义如下:

export class Item {
    name: String;
    checked: boolean = false;

    // this is a simplification of the actual type and method, I'm aware this seems unnecessary
    toggle(set: boolean = false): void {
        this.checked = !this.checked || set;
    }
}

在我的组件中，我使用对静态服务的订阅回调声明了一个项目数组。

import ...
@Component({
  templateUrl: './item.component.html',
  styleUrls: [ './item.component.less',
  providers: [ ItemService ]
})
export class ItemComponent implements OnInit {
  items: Item[];
  allChecked: boolean = false;

  constructor(private itemService: ItemService) { }

  ngOnInit() {
    this.itemService.getItems().subscribe(
      (response) => {
        this.items = items;
      }
    );
  }

  checkAll(): void {
    this.allChecked = !this.allChecked;

    for(let item of this.items) {
      item.toggle(allChecked);
    }
  }

在 html 中(以及上面组件的“checkAll()”函数)，我引用了在项目类型上定义的方法，如下所示:

<input ... (change)="checkAll()" />
...
<tr *ngFor="let item of items; index as i">
  <td>
    <input ... (change)="item[i].toggle()" />
  </td>
</tr>
...

我之前在组件 ngOnInit block 内模拟了项目数组。在这种情况下，这些方法调用执行得很好。只有在用实际的静态服务调用替换模拟数据之后，我才在访问toggle() 方法时遇到问题。我收到一条错误，指出我尝试对项目类型调用的方法未定义。

我知道范围界定在 javascript/typescript 中有点奇怪，但由于我使用语法糖箭头格式进行订阅回调，“this”应该引用正确的上下文，是吗？此外，由于我不知所措，我还尝试在服务调用之外使用 that = this; ，然后在回调内引用“that”，以确保我在外部类上设置 items 属性语境。无论哪种方式，似乎只要我退出订阅回调的上下文，任何项目的概念都会以未定义的形式返回。为什么是这样？我是否遗漏了 Angular 2+ 的一些关键点？

编辑:我意识到我的坑有点太深了，并且错误地认为我的 IDE 缺乏正确的映射(在调试时将组件数据显示为未定义，即使它没有)，而实际上数据是以 json 形式存在的没有任何方法定义。我在这篇文章中添加了更多代码，并更改了文本/标题以反射(reflect)这一点。

Answer 1

您从服务调用中获得 JSON 响应，而不是从您的实例中获得Item 类。作为普通数据对象，它们没有 ItemImpl 的方法定义。因此，您需要将每个对象映射到一个类实例。

interface Item {
  id: string;
  name: string;
}

class ItemImpl implements Item {
  id: string;
  name: string;

  constructor(item: Item) {
    this.id = item.id;
    this.name = item.name;
  }

  someMethod() {
    // ...
  }
}

然后映射 HTTP 调用的结果:

return this.http.get<Item[]>(this.myItemsUrl)
  .pipe(
    map(items => items.map(i => new ItemImpl(i)))
  );

在我看来，将逻辑 (someMethod()) 放入服务而不是 Item 数据类中会是更好的风格。