[英]How can i pass multiple variables from one component to the service in angular 9?
如何将多个变量从一个组件传递到服务,并在 angular 9 的另一个组件中获取它? 我非常努力地解决这个问题,但我找不到任何解决方案。 我试图将包含一些数据的变量从 sendComponent 传递/发送到服务,并将相同的数据发送到另一个 receiveComponent。 单击send.Html 上的按钮并导航到receiveComponent。
sent.Html:我想从这个 html 按下 OK 按钮后推送数据
<button class="btn btn-primary pull-right" (click)="onPushData()">
<i class="fa fa-check" aria-hidden="true"></i>
OK
</button>
sendComponent: secondTableData,totalPrice 和 totalPrice 这些是包含需要传递给 service.ts 的数据的变量,这可能是错误的做法
onPushData(){
let tData = this.secondTableData // want to push secondTableData variable
let t = this.totalPrice; // want to push totalPrice variable
let d = this.totalPrice // want to push totalQuantity variable
this.dataShareService.onPushTable(tData);
console.log(tData);
this.routerService.navigate(['./billprint'])
}
服务.ts:
@Injectable({
providedIn: 'root'
})
export class DataShareService {
onPushTable(tData) {
--Do something here--
}
}
receiveComponent:我想在这个组件中获取数据
recDataFromService() {
--do something here--
}
receive.Html:在此处显示数据
<tr *ngFor="let data of recData;let i = index">
<td>{{i+1}}</td>
<td>{{data.itemName}}</td>
<td>{{data.Quantity}}</td>
<td>{{data.retailRate}}</td>
</tr>
请帮我解决这个问题,请...如果您对此有任何想法,请分享您的答案。
示例:这是包含 secondTableData 中数据数组(itemName, Quantity,retailRate ....) 的代码
//To Copy data of First table to Second table
secondTableData = [];
updateSecondTable(data) {
let foundItem = this.secondTableData.find((item) => item.itemName ===
data.itemName);
if (foundItem) {
foundItem.rate = data.retailRate;
foundItem.Quantity += 1;
foundItem.retailRate += data.retailRate;
this.getColumnTotal(); // <----- To call total Price
return;
}
this.secondTableData.push({
itemName: data.itemName,
rate:data.retailRate,
Quantity: 1,
retailRate: data.retailRate,
})
this.getColumnTotal();
}
// to calculate total amount
getColumnTotal() {
const { Quantity, Price } = this.secondTableData.reduce((acc, item) =>
{
acc.Quantity += item.Quantity;
acc.Price += item.retailRate;
return acc;
}, {
Quantity: 0,
Price: 0
});
this.totalQuantity = Quantity;
this.totalPrice = Price;
}
Receive.html:这是我想在数组中显示数据的代码
我想在接收组件中推送这些变量(secondTableData、totalQuantity、TotalPrice...)并希望以表格形式显示它。
<table class="table table-bordered table-sm">
<thead>
<tr>
<th>SN</th>
<th>Product</th>
<th>Unit</th>
<th>Price</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let recData of myData;let i = index"> <!--i want to display here -->
<td>{{i+1}}</td>
<td>{{recData.itemName}}</td>
<td>{{recData.Quantity}}</td>
<td>{{recData.retailRate}}</td>
<td></td>
</tr>
<tr class="small" style="height: 10px;">
<td colspan="3" style="border: none;"></td>
<td>Gross Amount:</td>
<td>1100</td>
</tr>
<tr class="small">
<td colspan="3" style="border: none;"></td>
<td>Discount:</td>
<td>100</td>
</tr>
<tr class="small">
<td colspan="3" style="border: none;"></td>
<td>VAT</td>
<td>30</td>
</tr>
<tr class="small">
<td colspan="3" style="border: none;"></td>
<td>Net Amont</td>
<td>1030</td>
</tr>
</tbody>
</table>
您可以创建一个包含您想要的所有内容的传输对象(如果您希望使用单个调用发送所有变量):
const tData = this.secondTableData; variable
const t = this.totalPrice;
const d = this.totalQuantity;
const obj = {tData, t, d};
this.dataShareService.onPushTable(obj);
然后在您的服务上:
@Injectable({providedIn: 'root'})
export class DataShareService {
private yourData;
onPushTable(obj) {
this.yourData = obj;
}
getYourData() {
return this.yourData;
}
}
在您的组件中:
recDataFromService() {
this.myData = this.dataShareService.getYourData();
}
[根据评论更新]
上面的答案完全没有错 => 没有更多信息,我认为您只是想在错误的位置/时刻获取数据。 为了避免这个问题,你应该在服务中采用反应式方法:
@Injectable({providedIn: 'root'})
export class DataShareService {
private _yourData$: BehaviorSubject<{tData:any[];t:number;d:number}> =
new BehaviorSubject<{tData:any[];t:number;d:number}>({tData:[],t:0,d:0});
onPushTable(obj) {
this._yourData$.next(obj ? obj : {tData:[],t:0,d:0});
// if you're using ts >= 3.9.x you can use:
// this._yourData$.next(obj??{tData:[],t:0,d:0});
}
getYourData$(): Observable<{tData:any[];t:number;d:number}> {
return this._yourData$.asObservable();
}
}
在接收组件打字稿文件上:
_fromFirstComponent$: Observable<{tData:any[];t:number;d:number}> =
this._dataService.getYourData$();
constructor(private _dataService: DataShareService){}
并且,在您的接收模板中:
...
<tbody>
<tr *ngFor="let recData of (_fromFirstComponent$ | async)?.tData;let i = index"> <!--i want to display here -->
<td>{{i+1}}</td>
<td>{{recData.itemName}}</td>
<td>{{recData.Quantity}}</td>
...
如果您将其服务注入到其他组件中,则存储在您的服务中的任何变量都将在其他组件中可见。
在您的情况下,在onPushData
,将您想要的所有内容存储在您的服务中。 我不知道你到底想要什么,但会是这样的:
onPushData(){
let tData = this.secondTableData;
let t = this.totalPrice;
let d = this.totalPrice;
this.dataShareService.onPushTable(tData, t, d);
this.routerService.navigate(['./billprint'])
}
确保您的服务接收所有三个变量并将其存储在其上(例如,在您的服务上创建这些变量 tdata、t 和 d 并将其放在onPushTable
。
因此,在第二个组件构造函数中注入您的服务:
constructor(private myService:MyService)
然后,它将在以下位置可用:
console.log(this.myService.tData);
console.log(this.myService.t);
console.log(this.myService.d);
在您的服务中:
@Injectable({
providedIn: 'root'
})
export class DataShareService {
private subject = new Subject<any>();
onPushTable(data) {
this.subject.next(data);
}
getData(): Observable<any> {
return this.subject.asObservable();
}
}
在您的sendComponent
:
this.dataShareService.onPushTable({tData, t, d});
在您的receiveComponent
:
this.service.getData().subscribe(data => this.data = data);
然后使用 HTML 模板中的data
字段,例如:
<div>{{data.t}}</div>
<div>{{data.d}}</div>
<tr *ngFor="let rec of data.tData;let i = index">
<td>{{i+1}}</td>
<td>{{rec.itemName}}</td>
<td>{{rec.Quantity}}</td>
<td>{{rec.retailRate}}</td>
</tr>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.