要解决Angular HTTPClient无法显示来自你的WebApi的响应并将变量视为未定义的问题，你可以按照以下步骤进行操作：

1. 确保你已经正确地使用了Angular的HTTPClient模块，并在你的组件中导入了HttpClient模块。

import { HttpClient } from '@angular/common/http';

2. 在你的组件中定义一个变量来保存来自WebApi的响应。

response: any;

3. 在你的组件的构造函数中注入HttpClient。

constructor(private http: HttpClient) { }

4. 在你的组件中发送HTTP请求并处理响应。

getData() {
  this.http.get('your-api-url').subscribe((res) => {
    this.response = res;
    console.log(this.response);
  });
}

5. 在你的组件的模板中使用变量来显示响应。

{{ response | json }}

在以上步骤中，我们首先导入HttpClient模块，并定义一个response变量来保存来自WebApi的响应。然后，在构造函数中注入HttpClient，并在getData()方法中使用HttpClient发送HTTP请求，并将响应保存在response变量中。最后，在组件的模板中使用response变量来显示响应。

确保将'your-api-url'替换为你的WebApi的实际URL。

请注意，如果你的WebApi返回的是一个对象数组，你可以在模板中使用*ngFor指令来循环遍历并显示每个对象。

希望这可以帮助你解决问题！