angular - Angular 8 - 行为主题未在服务中发出下一个值
问题描述
嗨,我有一个角度应用程序,我将数据从一个组件传递到服务,并尝试通过调用它的下一个函数来更新该服务中行为主体的值,以便它反过来更新另一个组件中的订阅值。我的问题是当传递数据并创建一个对象以传递给行为主体时,下一个函数不会执行。这是代码。
我的 ShopService.ts
为了空间,我在代码中省略了其他函数,但它们应该与我尝试实现的代码无关
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { AuthService } from 'src/app/auth/auth.service';
import { Product } from '../models/product.model';
import { BehaviorSubject } from 'rxjs';
import { take, exhaustMap, tap } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class ShopService {
productsSubject = new BehaviorSubject<Product[]>(null);
productSubject = new BehaviorSubject<Product>(null);
productObs = this.productSubject.asObservable();
private products: Product[];
private product: Product;
private userToken;
constructor(private http: HttpClient, private authService: AuthService) {
}
// trying to update the behavior subject here but next never executes but data is logged to console
editProductForm(id: string, title: string, price: number, imagePath: string, description: string) {
this.product = new Product(title, price, imagePath, description, id);
console.log('edit product ' + this.product.title);
this.productSubject.next(this.product);
}
}
admin-shop.component.ts
这是我尝试订阅更新后的行为主题值的地方
import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import { NgForm } from '@angular/forms';
import { ShopService } from '../services/shop.service';
import { Subscription } from 'rxjs';
import { Product } from '../models/product.model';
@Component({
selector: 'app-admin-shop',
templateUrl: './admin-shop.component.html',
styleUrls: ['./admin-shop.component.css']
})
export class AdminShopComponent implements OnInit {
@Output() editProductEvent = new EventEmitter<boolean>();
productSub: Subscription;
product: Product;
error: string;
isLoading = false;
isEditing = false;
constructor(private shopService: ShopService) { }
ngOnInit() {
this.productSub = this.shopService.productSubject.subscribe(product => {
if (product) {
console.log('editing product' + product);
this.editProductEvent.emit(true);
this.product = new Product(
product.title,
product.price,
product.imagePath,
product.description,
product._id);
}
});
}
}
项目列表.component.ts
这是我将数据发送到服务的地方,我知道它正在被发送,因为一旦它到达服务,它就会被记录在控制台中。
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Product } from '../models/product.model';
import { ShopService } from '../services/shop.service';
import { Subscription } from 'rxjs';
@Component({
selector: 'app-item-list',
templateUrl: './item-list.component.html',
styleUrls: ['./item-list.component.css']
})
export class ItemListComponent implements OnInit, OnDestroy {
products: Product[] = [];
private shopSub: Subscription;
private subjectSub: Subscription;
constructor(private shopService: ShopService) { }
editProduct(id: string, title: string, price: number, imagePath: string, description: string) {
this.shopService.editProductForm(id, title, price, imagePath, description);
}
}
我提供的代码是问题所在,因为我已经在我的应用程序的其他部分中按预期工作的行为主题只是当我将数据从项目列表组件发送到它记录数据但没有的服务时'不更新行为主题,它永远不会到达订阅,因为没有数据记录在管理商店组件订阅代码中。
希望我已经提供了足够的答案来找到答案,但如果没有,请询问您认为必要的更多内容。提前致谢 :)
这是 app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { HomeComponent } from './home/home.component';
import { AuthComponent } from './auth/auth.component';
import { DropDownDirective } from './util/dropdown.directive';
import { HttpClientModule } from '@angular/common/http';
import { LoadingSpinner } from './util/loading-spinner/loading-spinner.component';
import { AdminComponent } from './admin/admin.component';
import { DashboardComponent } from './admin/dashboard/dashboard.component';
import { AdminShopComponent } from './admin/dashboard/admin-shop/admin-shop.component';
import { AdminProfileComponent } from './admin/dashboard/admin-profile/admin-profile.component';
import { ItemListComponent } from './admin/dashboard/item-list/item-list.component';
import { BlockchainComponent } from './blockchain/blockchain.component';
@NgModule({
declarations: [
AppComponent,
HeaderComponent,
HomeComponent,
AuthComponent,
DropDownDirective,
LoadingSpinner,
AdminComponent,
DashboardComponent,
AdminShopComponent,
AdminProfileComponent,
ItemListComponent,
BlockchainComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
解决方案
看起来您的服务没有被实例化。尝试将您的服务导入 app.module 下Providers
Import { ShopService } from '../services/shop.service';// Or wherever it's at
...
providers: [ShopService],
推荐阅读
- sql-server - 变量作为运算符 mssql
- python - 通过将旧值连接到另一个值来更新所有值数据框 Pandas
- python - Python df groupby 带有用于字符串和总和的 agg
- xml - 在定期更新的 XSD 中替换 xsd:choice
- python - pd.to_datetime 命令月份错误
- python - 哪个文件包含我的深度学习保存模型?
- c# - 升级到生产计划时 Azure 应用服务不工作
- tensorflow - tf.keras.layers.Concatenate() 使用列表但在张量元组上失败
- c# - 从 DataTable 中检索数据作为单行参数
- google-cloud-platform - 使用 Tableau Server 设置 Google 服务帐户