在订阅（rxjs）中初始化变量总是未定义的Angular 6答案

【问题标题】：initialize variable inside subscribe (rxjs) always undefined Angular 6在订阅（rxjs）中初始化变量总是未定义的Angular 6
【发布时间】：2019-04-11 14:03:29
【问题描述】：

我已经使用 Angular 6 工作了几个月。我有两个组件：第一个（父级）必须通过http请求读取参数并初始化内部属性；第二个（子）使用 @Input 装饰器在其自己的属性上使用此参数。我无法在订阅方法中设置父属性，该属性未定义。有什么建议吗？

父组件：

export class DeliberaComponent implements OnInit {

  private categoria: string = 'delibera';
  private prefix: string;

  constructor(private sistemaService: SistemaService) {
    this.sistemaService.readCategoriaAttributes(this.categoria)
    .subscribe(categoria => {
      this.prefix = categoria.listCategoriaAttribute.filter(attr => attr.chiave === 'prefixNamePdv').pop().valore; 
    });
  }

  ngOnInit() {
  }
}

子组件：

export class CreazioneManualeComponent implements OnInit {

  @Input()
  private prefix: string;
  private idpdv: string;

  ngOnInit() {
    this.idpdv = 
    this.prefix.concat(newDate().toDateString());
  }
}

这是 html 片段：

<sa-creazione-manuale [categoria]="categoria" [prefix]="prefix"></sa-creazione-manuale>

【问题讨论】：

标签： rxjs angular6

【解决方案1】：

如果您通过 http 获取信息，则在创建子组件之前您无法获得响应，因此，当 ngOnInit 运行时没有前缀。

你可以这样做....

    ngOnChanges(change: SimpleChanges) {
        If (change.prefix) {
            this.idpdv = 
            this.prefix.concat(newDate().toDateString());
        }
    }

但这非常昂贵，因为它会检查是否每次 changeDetection 在您的子组件上运行时...。如果可以更好的选择是直接在父组件的订阅中将日期添加到您的字符串.如果您在子组件的 html 中使用它，您还可以创建一个纯管道来为您执行此操作。

【讨论】：

【解决方案2】：

在@Tzannetos Philippakos 解释后，我找到了一个可行的解决方案：

export class DeliberaComponent implements OnInit {

  private categoria: string = 'delibera';
  private prefix: string;
  @ViewChild(CreazioneManualeComponent)
  private childCreazioneManuale: CreazioneManualeComponent;

  constructor(private sistemaService: SistemaService) {
  }
  
  ngOnInit() {
  }
  
  ngAfterViewInit () {
    this.sistemaService.readCategoriaAttributes(this.categoria)
    .subscribe(categoria => {
      let prefix = categoria.listCategoriaAttribute.filter(attr => attr.chiave === 'prefixNamePdv').pop().valore;
      this.childCreazioneManuale.setPrefix(prefix); 
    });
  }
}

在子组件中：

 setPrefix(prefix: string){
    this.idpdv = prefix.concat(new Date().toDateString());
    this.headerForm.controls['idpdv'].setValue(this.idpdv)
  }

HTML：

<sa-creazione-manuale [categoria]="categoria" ></sa-creazione-manuale>

【讨论】：