Javascript 与父控制器双向绑定角度组件

我有一个角度组件（供应商过滤器），我希望将数据传递给父控制器，并从父控制器传递数据。其目的是创建mainfo的过滤器，并将该数据传递回父控制器，以反映组件中的过滤。我的问题是这个mainfo变量在组件控制器中返回undefined。这是我的密码：

html

组件控制器：

class VendorFilterCtrl {
constructor($http, $scope, $timeout,assignmentDataService) {
    this.$scope = $scope
    this.$http = $http;

    const vm = this;
    //I could be initializing this wrong but this is where I'm trying to get 
    //the data. 
     vm.data = vm.mainInfo;               

}
app.controller('kanban').component("vendorFilters", {
templateUrl: "app/components/vendorFilters.html",
bindings: {
    store: "=?store",
    onChange: '&',
    mainInfo: '<'
},

controller: VendorFilterCtrl,
controllerAs: "ctrl",
bindToController: true
 });

class VendorFilterCtrl{
构造函数（$http、$scope、$timeout、assignmentDataService）{
这是。$scope=$scope
这个。$http=$http；
const vm=这个；
//我可能是初始化错误，但这就是我想要得到的
//数据。
vm.data=vm.mainfo；
}
应用程序控制器（“看板”）。组件（“供应商过滤器”{
templateUrl:“app/components/vendorFilters.html”，
绑定：{
存储：“=？存储”，
onChange:“&”，
mainfo:“首先对属性使用烤肉串大小写：

 <vendor-filters  ̶m̶a̶i̶n̶I̶n̶f̶o̶ main-info="ctrl.mainInfo"></vendor-filters>

我把它改成了烤肉盒，但它仍然没有给我从控制器到组件的数据。你能重现错误，并提供一个现场演示吗
class VendorFilterCtrl {
constructor($http, $scope, $timeout,assignmentDataService) {
    this.$scope = $scope
    this.$http = $http;

    const vm = this;
    //I could be initializing this wrong but this is where I'm trying to get 
    //the data. 
     vm.data = vm.mainInfo;               

}
app.controller('kanban').component("vendorFilters", {
templateUrl: "app/components/vendorFilters.html",
bindings: {
    store: "=?store",
    onChange: '&',
    mainInfo: '<'
},

controller: VendorFilterCtrl,
controllerAs: "ctrl",
bindToController: true
 });

 <vendor-filters  ̶m̶a̶i̶n̶I̶n̶f̶o̶ main-info="ctrl.mainInfo"></vendor-filters>

app ̶.̶c̶o̶n̶t̶r̶o̶l̶l̶e̶r̶(̶'̶k̶a̶n̶b̶a̶n̶'̶)̶ .component("vendorFilters", {