我想用Angular创建一个表单，但是我需要一些占位符数据，这些数据是从一个JSON服务中获取的，有三个字段。
我并不真正了解TypeScript是如何工作的，所以我可能犯了一个非常基本的错误，但下面是代码：

export class Component{
    public data:{
        id: string,
        quantity: number,
        ref: string
    };

    constructor(private service: Service){
        this.data = this.service.getDataById(id) // I get the id from elsewhere
    }

    ngOnInit(): void {}

    form = new FormGroup({
        id: new FormControl(this.data.id, Validators.required),
        ref: new FormControl(this.data.ref, Validators.required),
        quantity: new FormControl(this.data.quantity, Validators.required),
    })
}

这里也是我的服务：

export class service{
    /* @ngInject */
    constructor(private http: HttpClient) {}

    getDataById(id: number): Observable<{
        id: string;
        quantity: number;
        ref: string;
    }> {
        return this.http.get<{
            id: string;
            quantity: number;
            ref: string;
        }>(`api/getOfById/${id}`);
    }
}

我知道我得到了这些值，因为我的API返回了包含以下三个字段的JSON响应：

{
  creationTimestamp: /*the time*/, 
  data:{
    id: /*value*/,
    quantity: /*value*/,
    ref: /*value*/
  }
}

首先，我的服务返回一个Observable，因此我将data修改为：

public data: Observable<{
    id: string;
    quantity: number;
    ref: string;
  }>;

但是在我的this.data.id上出现了一个错误：
TS2729：属性"data"在其初始化之前使用。
我不理解这个错误，因为数据是在我的构造函数中初始化的。
这里我遗漏了什么？如何将JSON中的数据传输到组件中的data？

• • 更新日期：**

现在我有了这个：

export class Component{
  data: { id: string; quantity: number; ref: string };
  constructor(
    private service: Service
  ) {
    this.service
      .getDataById(id)
      .subscribe((value) => {
        this.data = value;
      });
  }
  //...
}

但我还是犯了同样的错误this.data.id：
TS2729：属性"data"在其初始化之前使用。

• • 更新2：**

在永顺的回答之后，现在我有：

export class Component {
  data!: { id: string; quantity: number; ref: string };
  constructor(
    private service: Service
  ) {}

  ngOnInit(): void {
    this.service
      .getDataById(id)
      .subscribe((value) => {
        this.data = value;
      });
  }

  form = new FormGroup({
    id: new FormControl(this.data.id, Validators.required),
    ref: new FormControl(this.data.ref, Validators.required),
    quantity: new FormControl(this.data.quantity,Validators.required),
  })
}

现在我得到了错误：
TypeError：无法读取未定义的属性（读取"id"）