有人可以解释一下这段代码的含义吗？

Question

这是代码： 解释：这是角度插值！

`{{ product.getAcceptedBid().description }}`

product 是我的 Product class 类型的属性，其中有一个名为 getAcceptedBid() 的方法和一个名为 description 的属性。 同时 getAcceptedBid() 是 Bid class 类型，其中有一个名为 description 的属性？ 这是什么？描述到底是做什么的？ 它指的是哪一个，投标 class 或产品 Class？ 除此之外。 它有什么作用？ 我知道 product.getAcceptedBid() 正在调用 getAcceptedBid() 方法，但问题出在 .descriotion 部分！ 我不明白！

Answer 1

在 JavaScript 和 TypeScript（以及许多其他面向对象的编程语言）中，多个. 同一个表达式上的访问器从左到右在链中进行评估，每个都在前一个结果上。

对于您的示例，这意味着.description是根据product.getAcceptedBid()表达式的结果评估的，因此这是评估的投标描述。

注意：这真的是纯JS/TS，这里Angular插值没什么特别的。

this.description 到底是做什么的？

它获取 object 上名为description的属性的值。

Answer 2

考虑类Product和Bid 。

class Product {

  public getAcceptedBid (): Bid {
    return new Bid()
  }

}

class Bid {

  public description = `foo`

}

如您所述， getAcceptedBid是 class Product的方法，而description是 class description的属性。

这意味着Product的实例，即使用new Product()创建的对象将有一个getAcceptedBid方法，您可以使用product.getAcceptedBid()调用该方法。 这个方法有什么作用？ 我们看看它的身体。

  public getAcceptedBid (): Bid {
    return new Bid()
  }

此方法创建 class Bid的实例，并将其返回。 因此，当您执行product.getAcceptedBid()时，您实际上得到了一个Bid实例。

const product = new Product()
const bid = product.getAcceptedBid()

现在，这个新创建的bid是Bid的一个实例，它有一个名为description的属性。 例如，您可以使用console.log来检查它的内部内容。

console.log(bid.description)

---

您所拥有的只是所有这些的简短版本，在一行中（加上您已经从某个地方获得了Product的实例，因此无需创建它）。

product.getAcceptedBid().description

您可以想象额外的括号，这可能会清除它：

( product.getAcceptedBid() ).description
~~~~~~~~~~~~~~~~~~~~~~~~~~~~
\                          /
  this is instance of Bid,
  like { description: 'foo' } 

Answer 3

简而言之： 1. 访问product object。 2. 然后通过调用 function 获得acceptedBid 值。 3.获取#2中收到的object的description属性。

因此，您将在 HTML 的 UI 上直观地看到description值。