Question

我有一个名为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();
  }

我希望我在这里正确地解决了这个问题。

这是我的Hobby-View-Component的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（）方法，对吗？

Answer 1

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

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

在ngOnIt中调用后，Subscribed Array不会更新。角度的

1 个答案: