绑定到嵌套对象的角度

Question

有了这个组件：

export class SearchPageComponent implements OnInit { 
    results: Array<ResultsModel> = []; 

    public constructor(private searchService: SearchPageService) { } 

    public ngOnInit(): void { 
     this.onSearch(new SearchCriteria()); 
    } 

    public async onSearch($event: SearchCriteria): Promise<void> { 
     this.results = await this.searchService.searchAsync($event); 
    } 
} 

它的模板：

<div class="container-fluid"> 
    <results-list [itemsList.entries]="results"></results-list> 
</div> 

子组件：

export class ResultsListComponent implements OnInit { 
    public itemsList: ItemsList<ResultsModel> = new ItemsList<ResultsModel>(); 

    public ngOnInit() { 
     this.itemsList.init(); 
    } 
} 

的ItemsList类：

export class ItemsList<T> { 
    private resultsObserver = new BehaviorSubject<Array<T>>([]); 

    @Input() public entries: T[] = []; 

    public set items(value) { this.resultsObserver.next(value); }; 

    public init() { 
     this.resultsObserver.subscribe(this.onResults.bind(this)); 
    } 

    private onResults(entries: T[]): void { 
     this.isLoading = false; 

     entries.forEach(entry => this.entries.push(entry)); 
    } 
} 

我想知道如何将数据传递给ItemsList.entries属性。我宁愿在模板中保留类似[itemsList.entries]的语法，但它甚至有可能吗？

使用上面的代码给我：

Can't bind to 'itemsList.entries' since it isn't a known property of 'results-list'.

我想达到什么可以通过什么[style.color]="whatever"做表示。这工作在ng2我想，为什么我的代码不工作？

Answer 1

我相对确定@Input属性只适用于子组件，不适用于类型。所以，你需要这样的：

export class ResultsListComponent implements OnInit { 
    @Input() itemsList: ItemsList<ResultsModel> = new ItemsList<ResultsModel>(); 
//... 
} 

是的，你就那么需要绑定itemsList而不是itemsList.entires：

<div class="container-fluid"> 
    <results-list [itemsList]="results"></results-list> 
</div> 

但你可能做到这一点：

export class ResultsListComponent implements OnInit { 
    public itemsList: ItemsList<ResultsModel> = new ItemsList<ResultsModel>(); 
    @Input() public entries: T[]; 
    //... 

    ngOnChanges(): void { 
     this.itemsList = new ItemsList<ResultsModel>(); 
     this.itemsList.entries = entries; 
    } 
}