虽然我写了必要的代码，但我得不到结果

Question

笔记本电脑的文字和价格应该出现在蓝色按钮上。虽然我写了必要的代码，但我无法得到结果

  <div class="card" style="width: 18rem;" >
  <img src="https://picsum.photos/400" class="card-img-top" alt="Card image cap"/>
  <div class="card-body" >
    <h5 class="card-title">
      {{product.name}} {{product.price | currency:'USD':true:"1.2-2"}}</h5>
        <p class="card-text">
          {{product.description}}
        </p>
    <a href="#" class="btn btn-primary">Go Somewhere</a>
  </div>

和product.price我得到一个错误 没有代码错误，在浏览器中看不到

应该写在上面代码要求的地方

.ts代码

  export class Product{
  id:number;
  name: string;
  price:number;
  categoryId:number;
  description:string;
  imageUrl:string;
}

Answer 1

您应该检查的事项：

检查器（浏览器开发工具）中是否存在 <h5> <p> 标签？
您确定 css 没有出于某种原因隐藏元素吗？例如将行 {{product.name}} {{product.price | currency:'USD':true:"1.2-2"}}</h5> 更改为 {{product.name}} {{product.price | currency:'USD':true:"1.2-2"}}TEST</h5> - TEST 是否出现？如果是，css 应该没问题
如果以上几点没问题，我怀疑product或product.name/product.currency未定义。也许在你的组件中添加一个 this.product.name='test'; 以确保它有一个值

虽然我写了必要的代码，但我得不到结果

Although I write the necessary codes, I can't get results

javascript

intellij-idea

typescript

angular