angular - 从父组件传递值到子组件不起作用
问题描述
我的父组件上有一个下拉列表,当用户选择一个值时,我想将该值传递给子组件,以便在另一个方法调用中传递给数据库。问题是我在孩子身上的价值总是不确定的。
父 HTML
<div>
<div style="margin-bottom: 20px;">
<kendo-label [for]="reportList" text="Report:" style="margin-right: 10px;margin-bottom: 20px;"></kendo-label>
<kendo-dropdownlist #reportList
[data]="reportListData"
[defaultItem]=defaultSelection
textField="reportName"
valueField="url"
(selectionChange)="reportDropDownChange($event)"
width="550px"></kendo-dropdownlist>
</div>
<div>
<kendo-label [for]="usersubscriptionadmin" text="Distributor Admin:" *ngIf="isAdmin()" style="margin-right: 10px;"></kendo-label>
<kendo-combobox #usersubscriptionadmin
[data]="userSubscriptionAdministrators"
[textField]="'userName'"
[valueField]="'userId'"
*ngIf="isAdmin()"
(selectionChange)="userSubscriptionAdminChange($event)"
style="width: 500px;"></kendo-combobox>
</div>
<div style="margin-top: 20px;">
<router-outlet></router-outlet>
</div>
</div>
父.ts
import { Component, OnInit } from '@angular/core';
import { NavigationEnd, Router } from '@angular/router';
import {Notifications} from './../core/notifications/notifications';
import {UserService} from './../user/user.service';
import {ReportListModel} from './../user/models/report-list-model';
import { UserSubscriptionAdministratorModel } from '../user/models/user_subscription_administrator_model';
@Component({
selector: 'app-reports-main',
templateUrl: './reports-main.component.html',
styleUrls: ['./reports-main.component.scss']
})
export class ReportsMainComponent implements OnInit {
public reportListData: ReportListModel[] = [{reportName: "Subscription Invoice Summary", url: "reports/invoice-report"},
{reportName: "Subscription Invoice Details", url: "reports/invoice-detail"},
{reportName: "Admin Report", url: "reports/admin-report"}];
public defaultSelection: ReportListModel = {reportName: 'Select a report', url:""};
public userSubscriptionAdministrators: UserSubscriptionAdministratorModel[] = [];
public href: any;
public reportURL: string='';
public selectedAdminUserId: number;
constructor(private notifications: Notifications, private router: Router, private userService: UserService) {
router.events.subscribe((event) =>{event instanceof NavigationEnd? this.href = event: null}); //get the page URL if there is a refresh
}
ngOnInit() {
//if the array is greater than one, then we know the user refreshed the page and already selected a report
//so now set the report drop down
this.reportURL = this.href.url.split('/')[2];
//now set the default report selection to be the page URL
if(this.reportURL != undefined)
{
console.log('setting default selection');
this.defaultSelection = this.reportListData.find(x => x.url.includes(this.reportURL));
}
this.userService.GetUserSubscriptionAdministrators().subscribe(response => {
response.forEach(a => {
let admin = new UserSubscriptionAdministratorModel();
admin.subscriptionId = a.subscriptionId;
admin.userId = a.userId;
admin.userName = a.firstName + ' ' + a.lastName;
if (a.customerName !== null) {
admin.userName += ' - ' + a.customerName;
}
if (a.ctsid !== 0) {
admin.userName += ' (' + a.ctsid + ')';
}
this.userSubscriptionAdministrators.push(admin);
});
})
}
public reportDropDownChange($event)
{
if($event.url != ""){
this.router.navigate([$event.url]);
}
}
public isAdmin() {
if (sessionStorage.getItem("UserType") == 'Administrator') {
return true;
} else {
return false;
}
}
public userSubscriptionAdminChange($event){
console.log('Parent value change ' + $event.userId);
this.selectedAdminUserId = $event.userId;
}
}
子 HTML
form [formGroup]="form" class="k-form-horizontal">
<div style="display: inline-block;">
<div style="display: inline-block; width: 175px;">
<kendo-label [for]="fromDate" text="From:" style="padding-right: 6px;"></kendo-label>
<kendo-datepicker
calendarType="classic"
formControlName="fromDate"
format="MM/yyyy"
placeholder="MM/YYYY"
#fromDate
style="width: 125px;">
</kendo-datepicker>
</div>
<div style="display: inline-block; width: 175px;">
<kendo-label [for]="toDate" text="To:" style="padding-right: 6px;"></kendo-label>
<kendo-datepicker
calendarType="classic"
formControlName="toDate"
format="MM/yyyy"
placeholder="MM/YYYY"
#toDate
style="width: 125px;">
</kendo-datepicker>
</div>
<div style="display: inline-block; width: 200px;">
<kendo-label [for]="txtInvoiceNumber" text="Invoice Number:" style="padding-right: 6px;"></kendo-label>
<kendo-textbox #txtInvoiceNumber formControlName="txtInvoiceNumber" style="width: 200px;"></kendo-textbox>
</div>
<div style="display: inline-block; width: 150px;padding-left: 6px;">
<button type="submit" class="k-button k-primary" (click)="RunReport()" >Search</button>
</div>
</div>
<div style="display: inline-block; padding-top: 5px;">
<kendo-grid
[data]="gridData"
[resizable]="true"
filterable="menu"
[sortable]="true"
[filter]="state.filter"
[skip]="state.skip"
[sort]="state.sort"
[pageSize]="state.take"
[pageable]="true"
[height]="375" >
<ng-template kendoGridToolbarTemplate>
<button type="button" kendoGridExcelCommand icon="file-excel">Export to Excel</button>
</ng-template>
<kendo-grid-column field="invoiceDate" title="Date" width="100"></kendo-grid-column>
<kendo-grid-column field="poNumber" title="PO Number" width="100"></kendo-grid-column>
<kendo-grid-column field="invoiceNumber" title="Invoice Number" width="100"></kendo-grid-column>
<kendo-grid-column field="invoiceAmount" title="Amount" width="100" format="{0:c}"></kendo-grid-column>
<kendo-grid-excel fileName="InvoiceSummaryReport.xlsx" [fetchData]="excelExportData">
<kendo-excelexport-column field="invoiceDate" title="Date"></kendo-excelexport-column>
<kendo-excelexport-column field="ponumber" title="PO Number"></kendo-excelexport-column>
<kendo-excelexport-column field="invoiceNumber" title="Invoice Number"></kendo-excelexport-column>
<kendo-excelexport-column field="invoiceAmount" title="Amount"></kendo-excelexport-column>
</kendo-grid-excel>
</kendo-grid>
</div>
</form>
子组件.ts
import { Component, Input, OnInit, } from '@angular/core';
import {FormControl, FormGroup} from '@angular/forms';
import {Router} from '@angular/router';
import {DatePipe} from '@angular/common';
import {addYears} from '@progress/kendo-date-math';
import {State, process} from '@progress/kendo-data-query'
import { ExcelExportData } from '@progress/kendo-angular-excel-export'
import {InvoiceSummaryReportModel} from '../models/invoice-summary-model';
import {ReportService} from '../report.service';
import { InvoiceSummarySearchModel } from '../models/invoice-summary-search-model';
import { Notifications } from '../../core/notifications/notifications';
@Component({
selector: 'app-invoice-report',
templateUrl: './invoice-report.component.html',
styleUrls: ['./invoice-report.component.css']
})
export class InvoiceReportComponent implements OnInit {
@Input('selectedAdminUserId') public parentSelectedAdminUserId: any;
public form: FormGroup;
public exportState: State;
public gridData: InvoiceSummaryReportModel[];
public exportData: any;
public tempDate:any;
public userId: number = Number(sessionStorage.getItem('UserId'));
public invoiceSearch: InvoiceSummarySearchModel;
public href: any;
public state: State = {
take: 20
}
constructor(private reportService: ReportService,
private router: Router,
private datepipe: DatePipe,
private notifications: Notifications) {
this.form = new FormGroup ({
fromDate: new FormControl(addYears(new Date(), -1)),
toDate: new FormControl(new Date()),
txtInvoiceNumber: new FormControl()
});
this.excelExportData = this.excelExportData.bind(this);
}
ngOnInit() { }
public RunReport(){
this.invoiceSearch = new InvoiceSummarySearchModel();
console.log('parent user id ' + this.parentSelectedAdminUserId);
if(this.isAdmin())
{
this.invoiceSearch.userId = this.parentSelectedAdminUserId;
}
else
{
this.invoiceSearch.userId = this.userId;
}
this.tempDate = this.datepipe.transform(this.form.controls.fromDate.value, 'MM/dd/yyyy').split("/");
this.invoiceSearch.fromDateMonth = parseInt(this.tempDate[0]);
this.invoiceSearch.fromDateYear = parseInt(this.tempDate[2]);
this.tempDate = this.datepipe.transform(this.form.controls.toDate.value, "MM/dd/yyyy").split("/");
this.invoiceSearch.toDateMonth = parseInt(this.tempDate[0]);
this.invoiceSearch.toDateYear = parseInt(this.tempDate[2]);
this.invoiceSearch.invoiceNumber = this.form.controls.txtInvoiceNumber.value;
this.reportService.GetInvoiceSummaryReport(this.invoiceSearch).subscribe(response => {
if(response.message == "Success"){
this.gridData = response.result;
}
else{
this.notifications.error(response.message);
}
});
}
public excelExportData(): ExcelExportData {
//set a filter for export if the user has filtered the result set.
this.exportState = {
filter: this.state.filter
};
//now set all the data to be exported. Using gridData will only return the first page because the array is spliced to into 20 records.
this.exportData = process<InvoiceSummaryReportModel>(this.gridData, this.exportState)
const result: ExcelExportData = {
data: this.exportData.data
};
return result;
}
isAdmin() {
if (sessionStorage.getItem("UserType") == 'Administrator') {
return true;
} else {
return false;
}
}
}
如何parentSelectedAdminUserId
在子组件中设置?
解决方案
您没有展示如何RunReport()
触发子组件中的功能。但通常我可以看到@Input
变量没有被动态访问。您可以执行以下操作之一
选项1:@Input
作为二传手
子组件
export class InvoiceReportComponent implements OnInit {
@Input() set parentSelectedAdminUserId(value: any) {
console.log('parent user id:', value);
// do something else
}
}
选项2:ngOnChanges
钩子
子组件
import { Component, OnInit, OnChanges, SimpleChanges, Input } from '@angular/core';
export class InvoiceReportComponent implements OnInit, OnChanges {
@Input() parentSelectedAdminUserId: any
ngOnChanges(changes: SimpleChanges) {
if (
!!changes &&
!!changes.parentSelectedAdminUserId &&
!!changes.parentSelectedAdminUserId.currentValue
) {
console.log('parent user id:', this.parentSelectedAdminUserId);
// do something else
}
}
}
推荐阅读
- azure - ESP32 的 C2D 消息
- python - 合并具有相同凭据的行 -pyspark 数据框
- python - Python - 从抽象基类继承的动态类注册
- javascript - 用 Javascript 而不是 jQuery 编写这个
- .net-core - 如何使用 Azure SDK for .Net Core 列出角色分配的成员?
- sql - 删除 id 存在多次但保留最新日期戳的记录的行
- javascript - docx 文件在从后端服务器下载时损坏
- google-sheets - 谷歌表拆分和剥离
- c++ - (Q. 有点小错误所以请检查正文) C float *q=NULL; printf("%f",q) ; 输出为 0.000000 但在 C++ 中 float *q=nullptr; cout<
[我的问题有点奇怪,但现在更改它是不对的,因为它得到了很好的解释,但我正在使用 [Update].......[Update End] 标签对其进行编辑,以避免对即将访问我的访问者造成混
- javascript - JavaScript 比较和逻辑运算符