Angular 如何在角度中使用observable初始化Typescript数组接口

我是个新手。我在显示联系人列表时遇到依赖项注入问题。 我有一个typescript接口数组，我在其中传递一个联系人的静态数组，这些联系人试图以html显示

我的服务班

 export class ContactService {

      contacts = {
        'contactsList': [
            {'id': 1, 'name': 'Rajesh', 'city': 'bangalore'},
            {'id': 2, 'name': 'Aarjith', 'city': 'london'},
            {'id': 3, 'name': 'Anjan', 'city': 'california'},
            {'id': 4, 'name': 'David', 'city': 'delhi'}
        ]
      };
      constructor(
      ) { }

      getContacts(): Observable<Contacts> {
        // send contacts to subscriber
        //return of({} as Contacts);
         return of(this.contacts);
      }
    }

我的联系人列表组件

export class ContactListComponent implements OnInit {

      contacts:Contacts[]=[];//i am getting error in this line
      constructor(
        private contactService: ContactService
      ) { }

      ngOnInit() {
        // get contacts from service and assign it to contacts
        this.contactService.getContacts().subscribe((data) => {
            this.contacts = data;//error at this line
          });
      }

用于显示的html

    <p class="title"> Contact Applications </p>
    <div class="list">
      <p *ngFor="let contact of contacts">
        {{contact.name}}
      </p>
    </div>

联系应用程序

{{contact.name}

---

我在初始化类型“Contacts”时遇到错误，因为类型“any[]”缺少以下属性：length、pop、push、concat等。我失踪的地方。我已将初始化更改为Contacts=[]，但似乎无法正常工作。

您可以尝试以下代码：

export interface Contact {
  id: number;
  name: string;
  city: string;
}

export class ContactService {

  constructor() { }

  contacts: Contact[] = [
    { 'id': 1, 'name': 'Rajesh', 'city': 'bangalore' },
    { 'id': 2, 'name': 'Aarjith', 'city': 'london' },
    { 'id': 3, 'name': 'Anjan', 'city': 'california' },
    { 'id': 4, 'name': 'David', 'city': 'delhi' }
  ];

  getContacts(): Observable<Contact[]> {
    return of(this.contacts);
  }
}

export class ContactListComponent implements OnInit {

  constructor(
    private contactService: ContactService
  ) { }

  contacts: Contact[] = [];

  ngOnInit() {
    this.contactService.getContacts().subscribe((contacts) => {
      this.contacts = <Contact[]>contacts;
    });
  }
}

导出接口联系人{
id：编号；
名称：字符串；
城市：字符串；
}
导出类联系人服务{
构造函数（）{}
联系人：联系人[]=[
{'id'：1，'name'：'Rajesh'，'city'：'bangalore'}，
{'id'：2，'name'：'Aarjith'，'city'：'london'}，
{'id'：3，'name'：'Anjan'，'city'：'california'}，
{'id'：4，'name'：'David'，'city'：'drih'}
];
getContacts（）：可观察{
（本合同）的返还；
}
}
导出类ContactListComponent实现OnInit{
建造师(
私人通讯服务：通讯服务
) { }
联系人：联系人[]=[]；
恩戈尼尼特（）{
this.contactService.getContacts（）.subscribe（（联系人）=>{
这个。联系人=联系人；
});
}
}

您的代码中有一些错误。应该是这样的:

导出接口联系人{
联系人列表：联系人[]；
}
导出接口联系人{
id：编号；
名称：字符串；
城市：字符串；
}
@可注射（{providedIn:'root'}）
导出类联系人服务{
联系人={
“联系人列表”：[
{'id'：1，'name'：'Rajesh'，'city'：'bangalore'}，
{'id'：2，'name'：'Aarjith'，'city'：'london'}，
{'id'：3，'name'：'Anjan'，'city'：'california'}，
{'id'：4，'name'：'David'，'city'：'drih'}
]
};
getContacts（）：可观察{
（本合同）的返还；
}
}
导出类ContactListComponent实现OnInit{
联系人：联系人[]；//{
//您需要从服务应答中获取contatactsList。
this.contacts=data？data.contacts列表：[]；
});
}
}

请参阅。

您尚未使用定义“数组接口”

您已经用数组类型属性定义了一个类型。表达式

[]

生成一个

数组

值

因此，声明

let contacts: Contacts = [];

由于数组没有

联系人列表

属性，因此格式不正确

正确的代码应该是

let contacts: Contacts = {
  contactList: []
};

---

getContacts（）返回一个可观察的。不可见的。因此，它发出的每个事件都是联系人的一个实例。不是一组联系人。因此，无法编译将发出的联系人分配给类型为Contacts[]的

联系人。但是将返回类型更改为Observable会导致另一个错误类型“Observable”，而不能分配给类型“Observable”。类型“{'contactsList'：{'id'：number；'name'：string；'city'：string；}[]；}”缺少类型“Contacts[]”中的以下属性：length、pop、push、concat等。订阅时我是否也需要更改任何内容？您必须声明
contacts:contacts
而不是
contacts:contacts[]=[]
在
ContactListComponent
上，我也尝试过这样声明，但我发现订阅属性“contactsList”中的错误在类型“contacts[]中丢失'但在类型'Contacts'中是必需的。实际上，我尝试了这种方法，它不会给出编译错误，但我无法更改我的接口，因为我们有独立的测试用例来通过它。所以，我可以在列表或服务类中修改任何内容以使其工作吗？谢谢。这段代码可以工作并显示结果，但在测试文件中失败，我无法修改。它（'should get data from service'，fakeAsync（（）=>{tick（100）；//等待可观察对象刷新数据expect（component.contacts）.toBe（testcontacts.contactsList）；}）；“Contact[]”类型的参数不能分配给“Expected”类型的参数。类型“Contact[]”缺少类型“ObjectContaining”中的以下属性：jasmineMatches，JasmineToString必须导入json文件（例如：
从“../assets/data.json”导入数据；
。我修改了演示以向您展示。是的。我也尝试了这种方式来导入json数据。感谢您的支持。
let contacts: Contacts = [];

let contacts: Contacts = {
  contactList: []
};