Angular 键值管道和循环 2 个对象

Question

我正在尝试重构一些我继承的代码，但不太确定如何理解。 在我的 ts 文件中，我声明了我想要包含的键的对象：

keysInclude = {
property1: 'Property 1',
property2: 'Property 2',
property3: 'Property 3',
}

myObject = {
property1: 'some string',
property2: 'some string',
property3: 'some string',
property4: 'some property I don't want to show'
property5: 'some property I don't want to show'
}

then in my template I have this part of the code

<div *ngFor = " let keyValuePair of keysInclude | keyvalue; let i=index">
<span>{{keyValuePair.value}}</span>
<span>{{myObject[keyValuePair.key]}}</span>
<span></span>
</div>

我正在努力输入我的键，理想情况下我想添加类型而不需要重构太多，但我担心我不太明白如何做到这一点。 myObject 类型将始终被定义，并且始终具有与 keysIninclude object 中的键相同的属性。我尝试使用 Record 以及 Angular 的 KeyValue 接口，但我总是遇到错误，因为我的 Element 隐式具有“any”类型，因为类型 {} 的表达式无法用于索引 myObject。

Answer 1

如果你知道你的对象的结构，建议创建一个类型来拯救你的生命。

您的

myObject

类型应实现

keysInclude

类型。当存在动态且不可预测的附加字段时，您可以使用索引签名。

keysInclude: { [key: string]: string } = {
  property1: 'Property 1',
  property2: 'Property 2',
  property3: 'Property 3',
};

myObject: typeof this.keysInclude | { [key: string]: string } = {
  property1: 'some string',
  property2: 'some string',
  property3: 'some string',
  property4: "some property I don't want to show",
  property5: "some property I don't want to show",
};

同时从

key

 中删除 

myObject[keyValuePair.key].key

，您将收到编译错误，因为 

key

 不存在。

<span>{{myObject[keyValuePair.key]}}</span>

演示@StackBlitz