Angular 7, обновление наблюдаемых данных - PullRequest
Новая
       34

Angular 7, обновление наблюдаемых данных

0 голосов
/ 23 мая 2019

Я довольно новичок в мире Angular и похож на машинопись. Пока у меня все хорошо, но я столкнулся с некоторым препятствием.

У меня есть служба ConfigService, у этой службы есть поле / свойство config, помеченное как наблюдаемое из типа SystemConfig. Это поле является «корзиной» для возврата http.get. SystemConfig - это пользовательский тип с множеством полей \ свойств различных типов, строк, строк [] и т. Д., В конце концов, это в конечном итоге объект JSON (для json-сервера, как будет объяснено ниже). 

public config = new Observable<SystemConfig>();

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

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

Примечание: на данный момент я раскручиваю локальный экземпляр json-сервера, и это извлекается из папки проекта. Я говорю это потому, что когда я обновляю JSON-файл с помощью http.post или put, проект также обновляется, и мои данные снова обрабатываются (что нормально до этого момента)

Затем я подписываюсь на this.config из других компонентов приложения через configService. В тех, которые я передаю данные, довольно определенные поля / свойства этого объекта в локальные свойства, чтобы установить списки и тому подобное.

Теперь в нескольких компонентах я добавляю в предоставленные списки и данные, а затем хочу обновить данные config и обновить «подписчиков», прежде чем я отправлю их обратно на сервер, что я хочу сделать как в любом случае, с нажатием кнопки (что я понимаю, как это сделать).

Разбить его здесь - простой пример того, что я пытаюсь сделать. (опуская очевидный код, включенный в код)

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>

Это всего лишь одна часть, на самом деле у меня есть несколько компонентов, которые выполняют похожие задачи.

Теперь из моего понимания "подписка" на наблюдаемое - моя настоящая "проблема" здесь, и мне, возможно, следует каким-то образом использовать "карту". Это где я не совсем уверен, куда идти. В настоящее время я слоняюсь по сети в поисках ответов, которые я могу связать или понять.

Я надеюсь, что кто-то может указать мне направление, чтобы помочь.

Заранее спасибо.

...