更新按鈕單擊角度列表

Question

希望我以簡潔的方式發布。 這里的主要目標是單擊按鈕后更新列表。 我有一份愛好清單。 當我單擊列表中的（hobbies.component）時，愛好視圖組件應使用該愛好類型的列表進行更新。 我可以成功撥打服務器。 但是，我沒有看到組件愛好視圖更新。

興趣愛好

<ul class="hobbyList">
  <li *ngFor="let hobby of hobbies" (click)="onSelect(hobby)">
      <span class="badge">{{hobby.HobbyName}}</span>
  </li>
</ul>

getHobbies（）創建所有單擊的愛好。 然后，onSelect使用服務來更新愛好視圖組件（有效）中的字符串。 然后嘗試更新興趣視圖組件中的列表。

export class HobbiesComponent implements OnInit {

  selectedHobby: hobbyObj;

  hobbies: hobbyObj[];

  constructor(
    private hobbyService: HobbyService,
    private masterhobbydata: MasterHobbydata
  ) { }

  ngOnInit() {
    this.getHobbies();
  }

  getHobbies(): void {
    this.hobbyService.getHobbies()
    .subscribe(hobbies => this.hobbies = hobbies);
  }

  onSelect(hobby: hobbyObj): void {
    this.selectedHobby = hobby;
    this.masterhobbydata.changeMessage(this.selectedHobby.HobbyName);
    this.masterhobbydata.getHobbiesById();
  }

}

Hobby-view.component

<ul>
  <li *ngFor="let hobby of hobbiesRooms">
      <span class="badge">{{hobby.hname}}</span>
  </li>
</ul>
<p>
  Message: {{message}}
</p>

export class HobbyViewComponent implements OnInit {
  hobbyRoomObj = HobbyRoomObj;
  hobbiesRooms: HobbyRoomObj[];

  message:string;

  constructor(private data: MasterHobbydata) { }

  ngOnInit() {
    this.data.currentMessage.subscribe(message => this.message = message);
  }

  getHobbiesById(): void {
    console.log("hit");
    this.data.getHobbiesById()
    .subscribe(hobbiesRooms => this.hobbiesRooms = hobbiesRooms);
  }
}

在ngOnIt內部，可以從hobbies.component內部的onClick方法成功更新簡單字符串。

這是服務組件MasterHobbyData

@Injectable({
    providedIn: 'root'
  })
export class MasterHobbydata {
    private messageSource = new BehaviorSubject<string>("1");
    currentMessage = this.messageSource.asObservable();

    private hobbyListByIdUrl="http://local/?Hobby=";

    constructor(private http: HttpClient){}

    changeMessage(message: string) {
        this.hobbyListByIdUrl += message;          
        this.messageSource.next(message);
    }

  //Returns a full list of current hobbies hosted
  getHobbiesById(): Observable<HobbyRoomObj[]>{
    return this.http.get<HobbyRoomObj[]>(this.hobbyListByIdUrl)
      .pipe(
        catchError(this.handleError('getHobbiesById', []))
      );
  }
}

我一直在嘗試為愛好列表操縱這段代碼。 我相信這是我的問題所在。

private messageSource = new BehaviorSubject<string>("1");
currentMessage = this.messageSource.asObservable();

我想我必須使BehaviorSubject變量

但是我似乎找不到正確的語法。

我的方法正確嗎？ 如果我是，我應該如何實現語法？ 任何幫助將非常感激。 我是Angular的新手。

清單

---

空手道蘋果蛋糕

當我單擊Apples時，對我的php腳本的請求將返回一個Apple列表。 等等等等。

Answer 1

我的建議是使用Subject。

i.e messageSource =  new Subject<string>();

並訂閱messageSource

 currentMessage = this.messageSource.asObservable(); not required remove it.

將currentMessage更改為messageSource

 ngOnInit() {
this.data.messageSource .subscribe(message => this.message = message);

}

每當messageSource更改時，它將自動訂閱您的組件。

 @Injectable({
    providedIn: 'root'
  })
export class MasterHobbydata {
    private messageSource = new BehaviorSubject<string>("1");
    currentMessage = this.messageSource.asObservable();

    private hobbyListByIdUrl="http://local/?Hobby=";

    constructor(private http: HttpClient){}

    changeMessage(message: string) {         
        this.messageSource.next(message);
    }

  //Returns a full list of current hobbies hosted
  getHobbiesById(message): Observable<HobbyRoomObj[]>{
const url = this.hobbyListByIdUrl + message; 
    return this.http.get<HobbyRoomObj[]>(url)
      .pipe(map(( response) =>{
return response;
        }
)).pipe(catchError(this.handleError('getHobbiesById', []))
      );
  }
}

組件文件更改

    export class HobbyViewComponent implements OnInit {
      hobbyRoomObj = HobbyRoomObj;
      hobbiesRooms: HobbyRoomObj[];

      message:string;

      constructor(private data: MasterHobbydata) { }

      ngOnInit() {
        this.data.currentMessage.subscribe(message => { 
    this.message = message
this.getHobbiesById(message);
});
      }

      getHobbiesById(message): void {
        console.log("hit");
        this.data.getHobbiesById(message)
        .subscribe(hobbiesRooms => this.hobbiesRooms = hobbiesRooms);
      }
    }