![](/img/trans.png)
[英]Pass API returning array data from Parent component to Child Component in Angular
[英]How to pass API returning data array values from Parent Component to Child Component in Angular
在這里我想傳遞this.bookingInfo = bookings.responseObj.txnValues;
的值 this.bookingInfo
數組值從父組件到我的子組件中的 bookingInfo 數組。我想將這些數據放入chartNameChartTTV.data = [];
子組件中的數組。 在這里divName
將訪問 html 文件am4core.create('divName', am4charts.XYChart);
不是 bookingInfo 數組。
這是我的父組件。
@Component({
selector: 'app-dashboard',
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit{
bookingInfo = [];
ngOnInit() {
this.getBookingInfo();
}
getBookingInfo() {
const params = [];
params.push({code: 'dateType', name: 'BOOKING'});
params.push({code: 'fromDate', name: '2019-01-01'});
params.push({code: 'toDate', name: '2019-12-31'});
this.ServiceHandler.getTxnInfo([], params).subscribe(
bookings => {
this.bookingInfo = bookings.responseObj.txnValues;
console.log(this.bookingInfo);
});
}
}
這是我的子組件。
@Component({
selector: 'app-summary-chips',
templateUrl: './summary-chips.component.html',
styleUrls: ['./summary-chips.component.scss']
})
export class SummaryChipsComponent implements OnInit {
@Input() bookingInfo: [];
ngOnInit() {
console.log(this.bookingInfo);
}
createSummaryChips( divName: string, chartDataInfo: [], chartValue: any, chartDate: any) {
am4core.useTheme(am4themesAnimated);
const chartNameChartTTV = am4core.create('divName', am4charts.XYChart);
chartNameChartTTV.width = am4core.percent(100);
chartNameChartTTV.height = am4core.percent(100);
chartNameChartTTV.padding(0, 0, 0, 0);
chartNameChartTTV.data = [];
}
}
這是我的服務 class。
@Injectable({
providedIn: 'root'
})
export class ServiceHandler {
getTxnInfo(headers: any[], params: any[]) {
return this.apiService.get( 'analytics-api/dashboard/txn-info', headers, params);
}
}
但是當我嘗試console.log(this.bookingInfo);
在子組件中,它顯示類似未定義的錯誤 這是我的dashboard.component.html 文件
<div class="l-content-wrapper c-summary-chip oh" >
<div class="c-summary-chip__txt">Cancellations</div>
<div id="divName" class="c-summary-chip__graph ">
</div>
</div>
但我希望它把這個代碼塊放入 summary-chips.component.html 並放入
像這樣的dashboard.component.html文件
<div class="l-content-wrapper c-summary-chip oh" style="visibility: hidden">
<app-summary-chips></app-summary-chips>
</div>
您只是缺少將您的 bookingInfo 從儀表板輸入到 app-summary-chips 輸入
在儀表板組件的 html 中:
<div class="l-content-wrapper c-summary-chip oh" style="visibility: hidden">
<app-summary-chips [bookingInfo]='bookingInfo'></app-summary-chips>
</div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.