Служба углового отдыха не возвращает значение при первом вызове

у меня 3 компонента 1. Компонент левого меню 2. Компонент приложения 3. Летний компонент

Кроме того, у меня есть две службы: одна для вызова отдыха, а другая для обмена данными с компонентом. (Рестсервис, компонентсервис)

При выборе списка из LeftMenuComponent я вызываю функцию loadService(), а оттуда я вызываю emit, содержащий функцию из службы SummeryComponent. которые подписываются на restservice для извлечения данных и их отправки.

Все работает нормально, но я должен щелкнуть дважды. мне нужно, чтобы данные были изменены и отражены в SummeryComponent одним щелчком мыши.

Я также пытаюсь использовать rxjs/Subscription, но результат тот же.

Левый-memu-component.html

<mat-list-item><a routerLink="/summery" (click)="loadService($event, subitem.CATID, subitem.ID)">{{subitem.NAME}}</a></mat-list-item>

Левое меню-Component.ts

import { Component, OnInit } from '@angular/core';
import { RestService } from '../rest.service';
import { Category } from '../models/category.model';
import { ArrayType } from '@angular/compiler/src/output/output_ast';
import { map } from 'rxjs/internal/operators/map';
import { ComponentService } from '../component.service';
@Component({
  selector: 'app-left-menu',
  templateUrl: './left-menu.component.html',
  styleUrls: ['./left-menu.component.css']
})

export class LeftMenuComponent implements OnInit {
 showFiller = false;
  constructor(private restService:RestService,private componentService:ComponentService) { }
  localdata:Category[];

  ngOnInit() {
    this.restService.getAllDepartment().subscribe(data=> this.localdata = data );
  }

  loadService(event,CATID,SUBID?){
    console.log(CATID);
    console.log(SUBID);
    this.componentService.getSummery(CATID,SUBID);
  }


}

летний-component.html

<div class="container-fluid example-sidenav-content">
  <div>
    <div class="row mt-4">
      <div class="col-lg-3" *ngFor="let item of summery">

        <mat-card class="example-card">
          <mat-card-header>
            <div mat-card-avatar class="example-header-image"></div>
            <mat-card-title>{{item.TITLE}}</mat-card-title>
            <mat-card-subtitle>{{item.SUBTITLE}}</mat-card-subtitle>
          </mat-card-header>
          <img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
          <mat-card-content>
            <p>
              {{item.CONTENT}}
            </p>
          </mat-card-content>
          <mat-card-actions>
            <button mat-button>LIKE</button>
            <button mat-button>SHARE</button>
          </mat-card-actions>
        </mat-card>

      </div>
    </div>
  </div>
</div>

Summery-Component.ts

import { Component, OnInit } from '@angular/core';
import { RestService } from '../rest.service';
import { Summery } from '../models/summery.model';
import { ComponentService } from '../component.service';

@Component({
  selector: 'app-summery',
  templateUrl: './summery.component.html',
  styleUrls: ['./summery.component.css']
})
export class SummeryComponent implements OnInit {


  constructor(private restService:RestService,private componentService:ComponentService) { }
  summery:Summery[];
  ngOnInit() {
    if(this.summery==null)
    {
      this.restService.getSummery().subscribe(data=>this.summery=data);
    }
    this.componentService.change.subscribe(change=>
    {
      this.summery = change;
    }
    );



  }

}

компонент-service.ts

import { Injectable, Output, EventEmitter } from '@angular/core';
import { Summery } from './models/summery.model'
import { RestService } from './rest.service';
import { BehaviorSubject } from 'rxjs';


@Injectable({
  providedIn: 'root'
})
export class ComponentService {

  summery : Summery[]=null;


  constructor(private restService:RestService) { 
    this.summery = null;
    console.log(this.summery);
  }


@Output() change:EventEmitter<Summery[]> = new EventEmitter();

  setSummery(CATID,SUBID?){
    this.restService.getSummery(CATID,SUBID).subscribe(data=>this.summery=data);
    console.log("chekc");
  }
   getSummery(CATID,SUBID?){
     this.restService.getSummery(CATID,SUBID).subscribe(data=>this.summery=data);
    this.change.emit(this.summery);
    console.log("chekc");
    return this.summery;
  }

}

отдых-service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpErrorResponse, HttpParams } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { map, catchError, tap } from 'rxjs/operators';
import { first } from 'rxjs/internal/operators/first';
import { Category} from './models/category.model';
import { error } from 'util';
import { Summery } from './models/summery.model';
import { Summary } from '@angular/compiler';
// import { Category } from 'src/app/models/category.model';

@Injectable({
  providedIn: 'root'
})

export class RestService {
  public _url: string = "http://localhost:52343/api/";


  constructor(private http: HttpClient) { }
  getAcess(username:string, password:string): Observable<any>{

    let main_url = this._url + "User";
    let params = new HttpParams();
    params= params.append('username', username);
    params= params.append('password', password);
    console.log(main_url);
    return this.http.get(main_url,{ params: params });
  }

  getAllDepartment():Observable<Category[]>{

    let main_url = this._url + "getProjectList";
    console.log(main_url);

     return this.http.get(main_url).pipe(map((data:Category[])=> data.map((item:Category) => new Category(item.ID, item.Name,item.SubDetail))));

  }

  getSummery(cid? :number,sid? :number):Observable<Summery[]>{
    let main_url = this._url +  "getSummery";
    let params = new HttpParams();
    if(cid !=null){
      params= params.append('cid', cid.toString());
    }
    if(sid !=null){
      params= params.append('sid', sid.toString());
    }
    console.log(main_url);
    // return this.http.get(main_url,{ params: params }).pipe(map((data:Summery[])=> data.map((item:Summery)=> new Summery(
    //   item.ID,
    //   item.SUBID,
    //   item.CATID,
    //   item.HEADER,
    //   item.TITLE,
    //   item.SUBTITLE,
    //   item.MEDIA,
    //   item.CONTENT
    // ))));
    return this.http.get(main_url,{ params: params });

  }
}

НЕТ ОШИБКИ, ТОЛЬКО НЕ РАБОТАЕТ В ОДИН КЛИК.

В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...
1
0
277
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вызов метода подписки в вашем наблюдаемом является асинхронным, поэтому нормально иметь такое поведение, чтобы заставить его работать, вы должны передать свое значение внутри функции обратного вызова, когда вы подписываетесь, как показано ниже:

this.restService.getSummery(CATID,SUBID).subscribe(data => this.change.emit(data));

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

Другие вопросы по теме