我的問題是，如何將專案陣列作為資料系結值傳遞？
在我的例子中，我通過 @Input() 給我的角度組件一個 IValues 陣列。
但是當我檢查應該接收到陣列的@Input() 變數時，它只是列印出一個物件陣列而不是一個IValues 陣列，盡管我給它的型別是IValues。
包含資料的組件 (FoodListPage)：
export class FoodListPage implements OnInit {
foods: IValues[]; // <-- My data to pass
category: string;
constructor(private router: Router) {
this.category = this.router.getCurrentNavigation().extras.state.categoryName;
this.foods = this.router.getCurrentNavigation().extras.state.values;
console.log("food-list-data: ", this.foods);
}
ngOnInit() {}
}
組件FoodListPage的html
<ion-content>
<app-header title="{{category}}"></app-header>
<app-food-listing values="{{foods}}"></app-food-listing> <!-- Here I pass the value (array of IValues) -->
<app-nav-button page="main-menu"></app-nav-button>
</ion-content>
應該接收值的 FoodListingComponent（IValue 陣列）
export class FoodListingComponent implements OnInit {
@Input() values: IValues[];
constructor() { }
ngOnInit() {
console.log("food-listing-data: ", this.values); //Console log (actual)
}
}
預期資料：(4) [{…}, {…}, {…}, {…}] <-- 均來自型別 IValue
實際資料：[object Object],[object Object],[object Object],[ object Object] <-- 只是來自“Object”型別...
uj5u.com熱心網友回復：
請檢查下面的 stackblitz，您需要使用 angular 屬性系結傳遞非原始型別，例如陣列和物件，[values]="foods"然后才能保持型別。
<ion-content>
<app-header [title]="category"></app-header><!-- changed here -->
<app-food-listing [values]="foods"></app-food-listing> <!-- changed here -->
<app-nav-button page="main-menu"></app-nav-button>
</ion-content>
分叉的堆疊閃電戰
uj5u.com熱心網友回復：
你能改變嗎
this.foods = this.router.getCurrentNavigation().extras.state.values;
至
this.foods = this.router.getCurrentNavigation().extras.state.values as IValues[];
我認為問題不在于@input。當您從路由中獲取值時，型別會丟失。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/505628.html
標籤：javascript 数组 有角度的 数据绑定