Angular组件数据可打印但模板无法显示问题求助

核心问题 #

你的代码存在两个关键错误，导致模板无法渲染数据：

1. 订阅回调未赋值：在ngOnInit的subscribe回调中，你仅写了this.commodity，未将获取到的res赋值给该变量，组件数据始终是空数组。
2. 变量使用不匹配：模板遍历的是commodity$，但你从未给这个变量赋值；反而commodity数组被声明却未在订阅中填充数据。

解决方案1：使用普通数组（非Observable） #

修改组件代码，在订阅回调中将res赋值给commodity数组，并调整模板遍历该变量：

组件代码修改

import { Component, OnInit } from '@angular/core';
// 保留其他导入项

@Component({
  standalone: true,
  imports: [
   CommonModule,
   FormsModule,
   ReactiveFormsModule,
  ],
  selector: 'app-commodity',
  templateUrl: '',
  styleUrls: ['./commodity.component.css']
})
export class CommodityComponent implements OnInit {
  commodity: ICommodity[] = [];
  isEditing: boolean = false;
  title = 'crud';

  constructor(
    private fb: FormBuilder, 
    private CosterService: CosterService,
    private crud: CrudtableService,
  ) { }

  ngOnInit(): void {
    this.crud.getAll().subscribe({
      next: (res) => {
        // 关键：将接口返回数据赋值给组件变量
        this.commodity = res;
        console.log(res);
      },
      error: (err) => {
        // 添加错误处理，便于排查请求异常
        console.error('数据获取失败:', err);
      }
    });
  }
}

模板修改

<div *ngFor="let item of commodity">
  <p>{{item.offtalkerpriceOID}}</p>
  <p>{{item.commodityDescription}}</p>
  <p>{{item.unitPrice}}</p>
  <p>{{item.unitOfMeasure}}</p>  
</div>

解决方案2：使用Observable + async管道（推荐） #

若要使用async管道，需将commodity$声明为Observable<ICommodity[]>类型，直接赋值请求返回的Observable，无需手动订阅：

组件代码修改

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
// 保留其他导入项

@Component({
  standalone: true,
  imports: [
   CommonModule,
   FormsModule,
   ReactiveFormsModule,
  ],
  selector: 'app-commodity',
  templateUrl: '',
  styleUrls: ['./commodity.component.css']
})
export class CommodityComponent implements OnInit {
  commodity$!: Observable<ICommodity[]>;
  isEditing: boolean = false;
  title = 'crud';

  constructor(
    private fb: FormBuilder, 
    private CosterService: CosterService,
    private crud: CrudtableService,
  ) { }

  ngOnInit(): void {
    // 直接将请求返回的Observable赋值给变量
    this.commodity$ = this.crud.getAll();
    // 可选：订阅打印数据，验证请求结果
    this.commodity$.subscribe(res => console.log(res));
  }
}

模板修改（必须搭配async管道）

<div *ngFor="let item of commodity$ | async">
  <p>{{item.offtalkerpriceOID}}</p>
  <p>{{item.commodityDescription}}</p>
  <p>{{item.unitPrice}}</p>
  <p>{{item.unitOfMeasure}}</p>  
</div>

额外注意事项 #

• 确保CrudtableService的getAll()方法返回的是符合Observable<ICommodity[]>类型的数据，字段结构与ICommodity接口完全匹配。
• 模板中*ngFor的数组项建议使用不同命名（如item），避免与组件变量commodity重名引发混淆。
• 始终添加错误处理逻辑，便于快速定位请求失败原因。

内容的提问来源于stack exchange，提问作者WiikoiTek