Question

我希望我以简洁的方式发布此信息。这里的主要目标是单击按钮后更新列表。我有一份爱好清单。当我单击列表中的（hobbies.component）时，爱好视图组件应使用该爱好类型的列表进行更新。我可以成功拨打服务器。但是，我没有看到组件爱好视图更新。

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);
      }
    }

更新按钮单击“角度”列表

1 个答案: