Question

我对Angular世界和打字稿都相当陌生。到目前为止，我的表现还不错，但是遇到了一些障碍。

我有一个服务ConfigService，该服务有一个字段/属性config，标记为来自类型SystemConfig的可观察项。此字段是返回http.get的“存储桶”。 SystemConfig是一种自定义类型，具有多个具有各种类型，字符串，string []等的field \ properties，最终它最终是一个JSON对象（对于json服务器，如后面所述）。

public config = new Observable<SystemConfig>();

/*
boilerplate code, constructor, etc..
*/

getConfig() {
   this.config = this.httpClient.get<SystemConfig>(this.url);
}

注意：截至目前，我正在构建一个本地json-server实例，并且正在从项目文件夹中提取该实例。我之所以这样说，是因为当我通过http.post或put更新JSON文件时，项目也会刷新，并且我的数据又再次被拉低了（到现在为止还可以）

然后，我通过this.config从应用程序的其他组件中订阅configService。在那些我传递数据，而是该对象的某些字段/属性传递给本地属性，以设置列表等。

现在在几个组件中，我要添加到提供的列表和数据中，然后我想更新config数据并更新“订户”，然后再将其全部发送回服务器，我要无论如何，只要按下按钮即可完成整个操作（我知道该怎么做）。

在这里分解是我要尝试做的一个简单示例。（省略了明显的cli包含的代码）

groups.component.ts

groups: group[];

constructor(private configService: ConfigService) {}

ngOnInit() {
  this.configService
   .subscribe(config => {
   this.groups = config.groups;
  }
}

//this is one part that I am lost/confused.  
addGroup() {

  //this is what works
  this.groups.push(new group());

  //Run function the "update" via a function in the configService to `put` or `post` the data back to the server

  //this is what I want
  this.configService.config.groups.push(new group());
}

groups.template.html

//this is what I have which works

<ul>
 <li *ngFor="let group of groups>{{group.name}}</li>
</ul>
<button (click)="addGroup()">Add Group</button>

//this is what I want (or something like it)
<ul>
 <li *ngFor="let group of configService.config.groups>{{group.name}}</li>
</ul>
<button (click)="addGroup()">Add Group</button>

这只是一部分，实际上，我有多个组件执行相似的任务。

现在，根据我的理解，“订阅”到可观察对象是我真正的“问题”，也许我应该以某种方式使用“地图”。这是我不确定要去哪里的地方。我目前正在网上浏览我可以关联或理解的答案。

我希望有人可以指出一个方向，以提供帮助。

谢谢。

角度7，更新可观察的数据

0 个答案: