初始化订阅内的变量 (rxjs) 总是未定义的 Angular 6

Question

我已经在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>

Answer 1

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

你可以这样做....

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

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

Answer 2

在@Tzannetos菲利帕科斯的解释之后，我找到了一个可行的解决方案：

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)
  }

目录：

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