这个问题通常是由于异步请求导致的。当组件加载时，API请求可能并没有返回数据，导致undefined值被赋给了组件属性。

解决方法是使用rxjs中的Observable和subscribe来管理异步行为，确保在API响应之前不会加载组件。以下是示例代码：

service.ts：

import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class ApiService {
  apiUrl = 'https://your.api.url';

  constructor(private http: HttpClient) {}

  getData(): Observable {
    return this.http.get(this.apiUrl).pipe(map(data => data));
  }
}

component.ts：

import { Component, OnInit } from '@angular/core';
import { ApiService } from './api.service';

@Component({
  selector: 'app-my-component',
  templateUrl: './my.component.html',
})
export class MyComponent implements OnInit {
  myData: any;

  constructor(private apiService: ApiService) {}

  ngOnInit() {
    this.apiService.getData().subscribe(data => {
      this.myData = data;
      console.log(this.myData); // should log API response data
    });
  }
}

这样，我们就能在API成功返回数据之后，用这个数据更新组件的属性，避免undefined值的出现。