html - 如何在 HTML 中显示对象的变量名称？

Question

在构建一个细节类来显示对象数据时，我似乎在重复自己。有没有办法 *ngFor: 对于 rug 对象的每个属性，显示属性的名称，然后将其绑定到对象的值？

//rug-detail.component.ts

   <div class="row">
        <div class="col-md-3">Name:</div>
        <div class="col-md-6">{{rug.name}}</div>
      </div>
      <div class="row">
        <div class="col-md-3">ID:</div>
        <div class="col-md-6">{{rug.id}}</div>
      </div>
      <div class="row">
        <div class="col-md-3">Availability:</div>
        <div class="col-md-6">{{rug.availability}}</div>
      </div>
      <div class="row">
        <div class="col-md-3">Price:</div>
        <div class="col-md-6">{{rug.price|currency:"USD":"symbol"}}</div>

//rug.ts

export interface Rug{
    name: string;
    id: number;
    availability: String;
    price: number;
}

同样的问题，对于 Ruby：Accessing a variable's name from an object

标签： html

Answer 1

一个提示：

rug = {
  name: "Name",
  id: 42,
  availability: "in stock",
  price: 123,
};

for (const key in rug) {
  console.log(`${key}: ${rug[key]}`)
}

// OR

for (const key of Object.keys(rug)) {
  console.log(`${key}: ${rug[key]}`)
}

两者之一必须在 Angular 中可用*ngFor