Question

我是Angular的新手。我正在使用Angular9。我试图订阅一个可观察的文章，您将在以下内容中阅读：

我有一个服务，该服务调用HTTP请求并返回一个Observable。订阅工作正常。至少看起来像这样。

ngOnInit() {
  this.initialDataViewModelSubscription = this.initialDataViewModelService.load()
     .subscribe(initialDataViewModel => {
        this.initialDataViewModel = initialDataViewModel;
     }, err => console.log(err));
}

在HTML上，我使用Angular-Material形式显示内容。

<div>
  <mat-form-field>
  <mat-label>Mitarbeiter</mat-label>
    <input matInput placeholder="Mitarbeiter"
       [value]="this.getData()" <!-- To test the Data, value would be this.initialDataViewModel.curentEmployee-->
       [readonly]="true">
  </mat-form-field>
</div>

组件中的

getData（）：

getData() {
    if (this.initialDataViewModel) {
      console.log('IDV:', this.initialDataViewModel)
      console.log('OK:', this.initialDataViewModel.OK)
      console.log('ASE:', this.initialDataViewModel.allowSelectEmployee)
      console.log('CD:', this.initialDataViewModel.currentDate)
      console.log('CE:', this.initialDataViewModel.currentEmployee)
    }
}

上面的代码产生以下结果：

IDV: {
      CurrentEmployee: {…}, 
      CurrentDate: "/Date(1584918000000)/", 
      AllowSelectEmployee: true, 
      SpecialProjectList: Array(7), 
      OK: true, …
     }
     > CurrentEmployee: {
          MitarbeiterId: 742, 
          MitarbeiterKuerzel: "GGG (NAME)", 
          MitarbeiterText: "GGG (NAME)", 
          MitarbeiterName: "Name"
       }
       CurrentDate: "/Date(1584918000000)/"AllowSelectEmployee: true
       SpecialProjectList: (7) [{…}, {…}, {…}, {…}, {…}, {…}, {…}]
       OK: true 
       Message: null
       __proto__: Object
}
component.component.ts:70 OK: true
component.component.ts:71 ASE: undefined
component.component.ts:72 CD: undefined
component.component.ts:73 CE: undefined

据我所知，我的对象 initialDataViewModel 已初始化并设置了所有变量。但是，一旦我想使用一个变量（例如currentEmployee），它是未定义的。为什么会这样，我在做什么错。

编辑：

@Component({
  selector: 'app-zeiterfassung',
  templateUrl: './zeiterfassung.component.html',
  styleUrls: ['./zeiterfassung.component.css']
})
export class ZeiterfassungComponent implements OnInit, OnDestroy{

  initialDataViewModel: InitialDataViewModel;

  initialDataViewModelObs: Observable<InitialDataViewModel>;

  initialDataViewModelSubscription;

  currentEmployee: EmployeeModel = new EmployeeModel();

  dateFormControl = new FormControl();

  projektFormControl = new FormControl('', Validators.required);

  dateClass;

  constructor(private initialDataViewModelService: InitialDataViewModelService) {
  }

  ngOnInit() {
    this.initialDataViewModelSubscription = 
    this.initialDataViewModelService.load().subscribe(initialDataViewModel => {
       this.initialDataViewModel = initialDataViewModel;
    }, err => console.log(err));
  }

  ngOnDestroy() {
    Utils.unsubscribeSubscription(this.initialDataViewModelSubscription);
  }

  getData() {
    if (this.initialDataViewModel) {
      console.log('IDV:', this.initialDataViewModel)
      console.log('OK:', this.initialDataViewModel.OK)
      console.log('ASE:', this.initialDataViewModel.allowSelectEmployee)
      console.log('CD:', this.initialDataViewModel.currentDate)
      console.log('CE:', this.initialDataViewModel.currentEmployee)
    }
  }

}

Answer 1

在没有完整的组件代码的情况下，很难确切地了解正在发生的事情，但是我认为正在发生的事情是模板在可观察的解析之前试图使用您的数据。通常，我认为如果数据由可观察对象填充，则需要对数据进行存在性检查。所以：

<div>
  <mat-form-field>
  <mat-label>Mitarbeiter</mat-label>
    <input *ngIf="initialDataViewModel" matInput placeholder="Mitarbeiter"
       [value]="initialDataViewModel"
       [readonly]="true">
  </mat-form-field>
</div>

然后，直到填充数据，输入才会显示。

此外，您的可变大小写似乎不一致。

allowSelectEmployee vs AllowSelectEmployee
currentDate vs CurrentDate
specialProjectList vs SpecialProjectList

等

为什么订阅后我的对象的变量未定义

1 个答案: