gpt4 book ai didi

javascript - 将第一项订阅数据传递给服务

转载 作者:行者123 更新时间:2023-11-28 17:32:01 26 4
gpt4 key购买 nike

我正在开发 Angular 应用程序,我需要应用以下机制:

我的 View 有 2 部分(项目列表和所选项目的详细信息)。用户可以单击某个项目,下一个服务会获取该项目的附加数据并在详细 View 中显示它们。另外,我想在启动时自动选择第一项(如果可用)。

这是我的服务:

@Injectable()
export class ItemService {

private url: string;
private itemSource = new BehaviorSubject<Item>(null);
selectedItem = this.itemSource.asObservable();

constructor(private http: HttpClient) {
this.url = 'http://localhost:8080/api/item';
}

getItems(): Observable<Item[]> {
let observable = this.http.get<Item[]>(this.url)
.map(items => items.map(item => {
return new Item(item);
}));
return observable;
}

selectItem(item: Item) {
return this.http.get<Item>(this.url + '/' + item.id)
.map(item => new Item(item))
.subscribe(t => this.itemSource.next(t));
}
}

在详细组件中,我正在订阅这样的选定项目:

  ngOnInit() {
this.itemService.selectedItem.subscribe(item => this.selectedItem = item);
}

以下代码来 self 显示项目列表的组件。我还想在订阅数据后设置所选项目,但我的代码不起作用。我正在迭代 html 模板中的 items[] 属性并显示数据,但是当我在订阅数据后访问该数组时,我得到了未定义。你能修复我的代码吗?谢谢!

  public items = [];

constructor(private itemService: ItemService) { }

ngOnInit() {
this.itemService.getItems()
.subscribe(
data => this.items = data,
err => console.log(err),
function () {
console.log('selected data', this.items); // this prints undefined
if (this.items && this.items.length) {
this.itemService.selectedItem(this.items[0])
}
});
}

最佳答案

您的问题是您在调用 subscribe 时没有使用箭头函数来执行 complete 回调。如您所见,您正在使用箭头函数来表示 nexterror

当您使用 function(...) {...} 定义新函数时,您正在创建一个新的上下文,因此 this 关键字会更改其意义。箭头函数和普通函数之间的区别(在我看来,除了更优雅之外),箭头函数没有为 this 定义新的上下文,因此该关键字的含义与它们是在上下文中定义的。因此,在您的 nexterror 回调中,this 是您的组件,但在您对 complete 的调用中,this 无疑是对 window 的引用,它没有 items 属性,因此是 undefined

将代码更改为:

public items = [];

constructor(private itemService: ItemService) { }

ngOnInit() {
this.itemService.getItems()
.subscribe(
data => this.items = data,
err => console.log(err),
() => {
console.log('selected data', this.items); // this prints undefined
if (this.items && this.items.length) {
this.itemService.selectedItem(this.items[0])
}
});
}

我想您在那里使用了 function 关键字,因为该函数没有参数,但您可以使用语法 () => expression 来表达它() => {...}

data => this.items = data 毕竟是一种更简单、更优雅的写法

(data) => { return this.items = data; }

关于javascript - 将第一项订阅数据传递给服务,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50115188/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com