[英]Updating a list on button click Angular
I hope i post this in a concise way. 希望我以简洁的方式发布。 The main goal here is to update a list after a button click.
这里的主要目标是单击按钮后更新列表。 I have a list of hobbies.
我有一份爱好清单。 When I click the (hobbies.component) in the list, the hobby-view component should update with a list of that hobby type.
当我单击列表中的(hobbies.component)时,爱好视图组件应使用该爱好类型的列表进行更新。 I can successfully make a call to the server.
我可以成功拨打服务器。 But, I'm not seeing the component hobby-view update.
但是,我没有看到组件爱好视图更新。
Hobbies.component 兴趣爱好
<ul class="hobbyList">
<li *ngFor="let hobby of hobbies" (click)="onSelect(hobby)">
<span class="badge">{{hobby.HobbyName}}</span>
</li>
</ul>
getHobbies() creates the ul of hobbies to click. getHobbies()创建所有单击的爱好。 onSelect then uses a service to update a string inside the hobby-view component (which works).
然后,onSelect使用服务来更新爱好视图组件(有效)中的字符串。 Then tries to update a list inside the hobby-view component.
然后尝试更新兴趣视图组件中的列表。
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 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);
}
}
Inside ngOnIt is where the simple string gets updated successfully from the onClick method inside hobbies.component. 在ngOnIt内部,可以从hobbies.component内部的onClick方法成功更新简单字符串。
Here is the service component MasterHobbyData 这是服务组件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', []))
);
}
}
I've been trying to manipulate this piece of code for the list of hobbies. 我一直在尝试为爱好列表操纵这段代码。 I believe this where my problem lies.
我相信这是我的问题所在。
private messageSource = new BehaviorSubject<string>("1");
currentMessage = this.messageSource.asObservable();
I think I have to make variable of BehaviorSubject 我想我必须使BehaviorSubject变量
But I can't seem to find the correct syntax to this. 但是我似乎找不到正确的语法。
Am I correct in my approach? 我的方法正确吗? If i am, how should I implement the syntax?
如果我是,我应该如何实现语法? Any help would be much appreciated.
任何帮助将非常感激。 I am new to Angular.
我是Angular的新手。
LIST 清单
Karate Apples Cake 空手道苹果蛋糕
When I click on Apples, a request to my php script will return a list of apples. 当我单击Apples时,对我的php脚本的请求将返回一个Apple列表。 And so on and so forth.
等等等等。
my suggestion is to use Subject. 我的建议是使用Subject。
i.e messageSource = new Subject<string>();
and subscribe to messageSource 并订阅messageSource
currentMessage = this.messageSource.asObservable(); not required remove it.
Change the currentMessage to messageSource 将currentMessage更改为messageSource
ngOnInit() {
this.data.messageSource .subscribe(message => this.message = message);
} }
Whenever the messageSource changed it will automatically subscribed in you component. 每当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', []))
);
}
}
component file changes 组件文件更改
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);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.