web-dev-qa-db-ja.com

Angular 5サービス変数値の更新

angularサービス変数の値を更新できません。

関連のないコンポーネントが2つあり、サービスを使用して、更新されたオブジェクトを一方から他方に送信したいと思います。しかし、サービス中のオブジェクトを更新できません。

最初のコンポーネント：

import { SoruService } from '../soru.service';
import { SoruModel, SecenekModel } from '../soruModel';

@Component({
    selector: 'app-first',
    templateUrl: './first.component.html',
    styleUrls: ['./first.component.scss'],
    providers: [SoruService]
})
export class FirstComponent implements OnInit {
    public soruLst : [SoruModel];

    constructor( private soruServis : SoruService ) { }

    ngOnInit(){
        this.soruServis.getirSoruLst().subscribe( veri => {
            this.soruLst = veri as [SoruModel];
        })
    }

    //// MAKE SOME CHANGES ON "soruLst" locally 

    // Send updated 'soruLst' to service 
    updateSoruLst(){
        this.soruServis.updateSoruLst(this.soruLst);
    }

}

私のサービス：

import { Injectable } from '@angular/core';
import { SoruModel, SecenekModel } from './soruModel';
import { Http } from '@angular/http';

const metaJson = 'assets/data/Meta.json';

@Injectable()
export class SoruService {

    public sorular = [] as [SoruModel];

    constructor( private http:Http ) {
        this.sorular = [] as [SoruModel];
    }

    getirSoruLst() {
        return this.http.get(metaJson)
        .map(yanit => yanit.json())
    }

    updateSoruLst( soruLst : [SoruModel] ) {
             this.sorular = soruLst;
     }

    getSorular() : [SoruModel] {
        return this.sorular;
    }

}

2番目のコンポーネント：

mport { SoruService } from '../soru.service';
import { SoruModel, SecenekModel } from '../soruModel';

@Component({
    selector: 'app-second',
    templateUrl: './second.component.html',
    styleUrls: ['./second.component.scss'],
    providers: [SoruService]
})
export class SecondComponent implements OnInit {
    public soruLst : [SoruModel];

    constructor( private soruServis : SoruService ) { }

    ngOnInit(){
        this.soruLst = this.soruServis.getSorular();
        console.log(this.soruLst);
    }
}

これは私がやりたいことです：

  1. firstComponentで、サービスから 'soruLst'を取得し、ローカルで変更します（成功）

  2. firstComponentで、変更された 'soruLst'をサービスに送信します（成功-updateSoruLst）

  3. serviceで、 'sorular'を更新し、 'updateSoruLst'で（失敗-変更されません。関数スコープが変更されるだけですが、更新された値を読み取ることができません）。私はそれに問題があります：

    updateSoruLst（soruLst：[SoruModel]）{this.sorular = soruLst; }

「this.sorular」の値はグローバルに変更されません。

  1. secondComponentで、サービスから更新された「sorular」を読み取ります（失敗しましたが、更新された値を読み取ることはできません）

サービスを変更する必要があると思いますが、どこを変更する必要があるのか​​わかりませんでした。

サービス中のオブジェクトを更新するにはどうすればよいですか？

angularvariablesserviceupdating
5
mevaka

JB Nizetが述べたように、FirstComponentおよびSecondComponentよりも高いレベルでサービスを提供する必要があります。つまり、SoruServiceを指定する必要があります

  • モジュールクラスのいずれか
  • または、上記のコンポーネントの親コンポーネントクラスに存在する場合

このようにして、両方のコンポーネントがサービスの同じインスタンスを共有し、必要なものを実現できるようになります。

アプリのルートモジュールにコンポーネントがあると仮定します。
コンポーネントデコレータからプロバイダー属性を削除し、以下のようにモジュールを変更します。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FirstComponent } from './first.component';
import { SecondComponent} from './second.component';
import { SoruService } from '../soru.service';

@NgModule({
   imports: [
      BrowserModule
   ],
   declarations: [
       AppComponent,
       FirstComponent,
       SecondComponent
   ],
   providers: [
       SoruService
   ],
   bootstrap: [AppComponent]
})
export class AppModule {
}

また、 here のサービスを使用してコンポーネント間でデータを共有するための簡単なrxjs Subjectの例を見つけることができます。

4
Senal