时间戳

首页 > 解决方案 > 在 ngOnIt 中调用后订阅的数组不会更新。角

angular - 在 ngOnIt 中调用后订阅的数组不会更新。角

问题描述

我有一个名为 Hobby 的对象数组。我可以在组件首次加载时设置对象数组。但是每当我去更新那个对象数组时，我不能。

这是我列出了一系列爱好的组件。爱好-视图-组件。当我调用服务组件时，hobbies[] 数组永远不会更新，因此在我的 console.log 方法中返回一个空值。

      export class HobbyViewComponent implements OnInit {
  hobbyRoomObj = HobbyRoomObj;
  hobbiesRooms: HobbyRoomObj[];
  ngOnInit() {
    this.data.currentMessage.subscribe(message => this.message = message);
    this.getHobbies();
  }

  getHobbies()
  {
    console.log("hit2");
    this.data.getHobbiesById().subscribe(data => this.hobbiesRooms = data);
    //console.log(this.hobbiesRooms.length.toString());
  }

接下来将调用该 url 并在此 Service 类中发出有效请求。我知道正在返回的作品。如前所述，此方法适用于 ngOnIt。

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

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

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

下一个组件使用 onClick() 方法告诉前一个组件进行更新。hbv 是 Hobby-View-Component 类型。

export class HobbiesComponent implements OnInit {


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

我希望我在这里正确地关注问题。

这是我的爱好视图组件的 html：

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

//////////~~~~~~~!!!! 嘘！！！！~~~~~~~\\\\\\\\\\\\

通过创建 HobbyRoomObj[] 类型的主题并创建可观察变量来更新 Service 类。另外，接下来使用 Subject 方法，我将请求的 json 对象添加到 HobbyRooms[] 的 Subject 中。

export class MasterHobbydata {

  private hobbies = new Subject<HobbyRoomObj[]>();
  newHobbies = this.hobbies.asObservable();

  //Returns a full list of current hobbies hosted
  getHobbiesById(): Observable<HobbyRoomObj[]> {

    console.log(this.hobbyListByIdUrl);
    return this.http.get<HobbyRoomObj[]>(this.hobbyListByIdUrl)
      .pipe(map((response) => {
        this.hobbies.next(response);
        return response;
      }
      )).pipe(catchError(this.handleError('getHobbiesById', []))
      );
  }

}

在 Hobby-View-Component.ts 中，我订阅了 ngOnInIt 中服务组件的 newHobbies Observable。然后，每当我点击一个新爱好时，我都会订阅 GetHobbiesById 并更新列表。

  ngOnInit() {
    this.data.currentMessage.subscribe(message => this.message = message);
    console.log("hit2");
    this.data.newHobbies.subscribe(
      data => {this.hobbiesRooms = data;
      });
  }

  getHobbies()
  {

    this.data.getHobbiesById().subscribe(
      data => {this.hobbiesRooms = data;
      console.log(this.hobbiesRooms);
      });
  }

我想我唯一的好奇心是为什么我要订阅两次。我认为我订阅了 hobbyroomobj[] 然后订阅了 gethobbiesbyId() 方法是否正确？

标签： angularcomponents

解决方案

您需要将 console.log 放在订阅中，

this.data.getHobbiesById().subscribe(
data => this.hobbiesRooms = data;
console.log(this.hobbiesRooms);
);

推荐阅读