Original answer

这是Typescript的常见问题，你说device是Device类型，但它不是.它的所有属性都与Device相同，但因为它不是Device，所以没有预期的方法.

您需要确保为Page中的每个条目实例化Device，可能是在父组件的ngOnInit中:

我不知道Page的 struct ，但如果它是一个数组，请try 以下方法.

ngOnInit() {
  this.deviceService.list('', 'sensor', ).subscribe(
    res => { 
      this.devices = res.results.map(x => Object.assign(new Device(), x));
    }
  )
}

Further explanation

让我们try 一个typescript示例，因为这种行为与Angular无关.我们将使用localStorage来表示来自外部源的数据，但这与HTTP的工作原理相同.

interface SimpleValue {
    a: number;
    b: string;
}

function loadFromStorage<T>(): T {
    // Get from local storage.
    // Ignore the potential null value because we know this key will exist.
    const storedValue = localStorage.getItem('MyKey') as string;

    // Note how there is no validation in this function.
    // I can't validate that the loaded value is actually T
    // because I don't know what T is.
    return JSON.parse(storedValue);
}

const valueToSave: SimpleValue = { a: 1, b: 'b' };
localStorage.setItem('MyKey', JSON.stringify(valueToSave));

const loadedValue = loadFromStorage<SimpleValue>();

// It works!
console.log(loadedValue);

很好，太棒了.typescript接口纯粹是一种编译时 struct ，与类不同，它在JavaScript中没有类似功能——它只是一个开发人员提示.但这也意味着，如果你为一个外部值创建一个接口，比如上面的SimpleValue，然后得到wrong，那么编译器仍然会相信你知道你在说什么，它不可能在编译时验证这个.

从外部源加载类怎么样？这有什么不同？如果我们以上面的例子，在不改变任何其他内容的情况下，将SimpleValue改为一个类，那么它仍然有效.但这是有区别的.与接口不同，类被转换成JavaScript类似功能，换句话说，它们存在于编译点之后.在我们上面的示例中，这不会导致问题，所以让我们try 一个确实会导致问题的示例.

class SimpleClass {
    constructor(public a: number, public b: string) { }

    printA() {
        console.log(this.a);
    }
}

const valueToSave: SimpleClass = new SimpleClass(1, 'b');
localStorage.setItem('MyKey', JSON.stringify(valueToSave));

const loadedValue = loadFromStorage<SimpleClass>();

console.log(loadedValue.a); // 1
console.log(loadedValue.b); // 'b'
loadedValue.printA(); // TypeError: loadedValue.printA is not a function

加载的值具有我们预期的属性，但没有方法，哦！问题是调用new SimpleClass时会创建方法.当我们创建valueToSave时，我们确实实例化了这个类，但后来我们将它转换成一个JSON字符串并将其发送到其他地方，JSON没有方法的概念，因此信息丢失了.当我们在loadFromStorage中加载数据时，not调用了new SimpleClass，我们只是相信调用方知道存储的类型.

我们该如何应对？让我们回到Angular ，考虑一个常见的用例:日期.JSON没有日期类型，JavaScript有，那么我们如何从服务器检索日期并将其作为日期使用呢？这是我喜欢使用的一种模式.

interface UserContract {
    id: string;
    name: string;
    lastLogin: string; // ISO string representation of a Date.
}

class UserModel {
    id: string; // Same as above
    name: string; // Same as above
    lastLogin: Date; // Different!

    constructor(contract: UserContract) {
        // This is the explicit version of the constructor.
        this.id = contract.id;
        this.name = contract.name;
        this.lastLogin = new Date(contract.lastLogin);

        // If you want to avoid the boilerplate (and safety) of the explicit constructor
        // an alternative is to use Object.assign:
        // Object.assign(this, contract, { lastLogin: new Date(contract.lastLogin) });
    }

    printFriendlyLastLogin() {
        console.log(this.lastLogin.toLocaleString());
    }
}

import { HttpClient } from '@angular/common/http';
import { Injectable, Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable({
    providedIn: 'root'
})
class MyService {
    constructor(private httpClient: HttpClient) { }

    getUser(): Observable<UserModel> {
        // Contract represents the data being returned from the external data source.
        return this.httpClient.get<UserContract>('my.totally.not.real.api.com')
            .pipe(
              map(contract => new UserModel(contract))
            );
    }
}

@Component({
    // bla bla
})
class MyComponent implements OnInit {
    constructor(private myService: MyService) { }

    ngOnInit() {
        this.myService.getUser().subscribe(x => {
            x.printFriendlyLastLogin(); // this works
            console.log(x.lastLogin.getFullYear()); // this works too
        });
    }
}

也许有点冗长，但这是我用来处理来自扁平后端合同的丰富前端模型的最健壮、最灵活的模式.