无法将数据传递和访问数据到Angular中的无状态组件 [英] Trouble passing and accessing data to stateless component in Angular

问题描述

我正在尝试一些非常简单但有很多麻烦的事情.我有一个容器组件和一个子组件:

I'm trying something very simple but having alot of trouble. I have a container component and child component:

-- street.dashboard.component
---- street.search.component

我正在进行服务调用并在仪表板组件中设置数据，然后使用

I'm doing a service call and setting data in my dashboard component and then passing it through using

<street-search locations="streets"></search> 

但是，在子组件中，我无法访问班级中的该数据吗?我可以在模板中很好地呈现它，并看到它已经通过，但是无法在我的班级中访问它.

however, in my child component, I can not get access to that data within my class? I can render it in the template fine and see that it's getting passed through, but cannot access it in my class.

有什么想法吗?

street-dashbaord.component

street-dashbaord.component

@Component({
    selector: 'street-dashboard',
    styleUrls: ['street-dashboard.component.scss'],
    template: `
       <street-search locations="streets"></street-search>
    `

export class StreetDashboardComponent implements OnInit {
    streets: any;
    constructor(private streetService: StreetDashboardService ) {}
    ngOnInit() {
        console.log("ngOnInit");
        this.streetService
        .getStreets()
        .subscribe((data: Street[]) => this.streets = data);
    }
}

街道搜索组件

@Component({
    selector: 'street-search',
    template: `
        {{ locations.length }} <!-- This renders fine -->
        <md-input-container> 
            <input type="text" mdInput placeholder="Enter your street..."
            [formControl]="myControl" [mdAutocomplete]="auto">  
        </md-input-container>

        <md-autocomplete #auto="mdAutocomplete" showPanel="false">
            <md-option *ngFor="let option of filteredOptions | async" 
            [value]="option" (onSelectionChange)="selected($event, option)">
                {{ option }}
            </md-option>
        </md-autocomplete>
    `
});

export class StreetSearchComponent {
    @Input()
    locations: any;

    constructor () {
       console.log("Locations: ", this.locations); // Undefined ??
    }
}

尽管在浏览器中看到了locations.length，但我也收到了控制台错误

Despite seeing the locations.length in the browser, I do also get a console error of

ERROR TypeError: Cannot read property 'length' of undefined

我也尝试在子组件中使用ngOnInit，但没有任何乐趣.谢谢

I've also tried using ngOnInit in the child component but no joy. Thanks

推荐答案

@Input 首先在 OnChanges 中可用(构造函数首先运行，因此在那里不可用))，因此通常可以在 OnInit 中使用它，但是由于数据的检索是异步的，所以我猜想当在子级中运行 OnInit 时，数据仍将是未定义的.

@Input is first available in OnChanges (constructor is run first of all, so not available there), so usually it's available then in OnInit, but since the retrieval of data is async, I'm guessing it will still be undefined when OnInit is run in child.

您可以在 OnChanges 中的 @Input 变量中监视更改，当 Input 变量发生更改时会触发该更改，请尝试:

You can watch for the changes in @Input variable in OnChanges, which is fired when changes happen to the Input variable, so try:

ngOnChanges() {
  if(!locations.length) {
    console.log('not yet!')
  } else {
    console.log(locations)
  }
}

正如Aluan所指出的那样，您还忘记了位置周围的 [] .使用括号，您实际上是在绑定变量 街道，因此应该是:

And as Aluan kindly pointed out, you have also forgotten [ ] around locations. With the brackets you are actually binding your variable streets, so it should be:

<street-search [locations]="streets"></search>

这篇关于无法将数据传递和访问数据到Angular中的无状态组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！