将字符串数组的动态值分配给打字稿中对象的属性答案

【问题标题】：Assigning dynamically values of string array to properties of an object in typescript将字符串数组的动态值分配给打字稿中对象的属性
【发布时间】：2022-01-26 21:02:17
【问题描述】：

假设名为 searchBox 的组件接收两个输入：@Input() titles: string[] 和 @Input() model: Object，titles 值的数量等于 model 属性。 searchBox 生成titles 长度的输入框，并从用户那里获取搜索主题并将它们推送到名为titlesValues 的字符串数组中。因此，searchBox 应该点对点地将 titlesValues 的值分配给 model 属性，并通过@Output resultModel: Object 输出模型。我尝试动态访问每个 model 属性以进行分配，因此我在下面对这个场景进行了编码：

let i =0;
  Object.keys(this.model).forEach((key) => {
     this.model[key] = this.titlesValues[i];
   });

虽然我测试了很多语句和替代代码以获得期望的结果，但它得到以下错误：

元素隐式具有“any”类型，因为“string”类型的表达式不能用于索引“Object”类型。

我该如何实现这个场景？最好的问候。

【问题讨论】：

你能创建一个 Stackblitz 示例吗？
很难理解，能否请您创建 stackblitz 示例？

标签： javascript angular typescript

【解决方案1】：

尝试改变这个：

@Input() titles: any[]

【讨论】：

建议尝试一些属于 cmets 的东西。

【解决方案2】：

要克服该错误，您可以将model 显式定义为any 类型：

@Input() model: any;

或

为model 定义一个新接口并将其用作：

interface Model {
    [index: string]: string;
}

@Input() model: Model;

【讨论】：

如果将输入定义为接口模型，当我们发送模型如：myModel={name:'', job:'', addr:'', age:''} 到 searchBox 时，是searchBox 输入是否不一致？
Define 效果很好，但我们要避免在代码中使用类型 'any'。
如果我们定义了Model接口，那么我们在使用的时候需要跨应用保持一致。向 SearchBox 组件发送数据的组件应确保发送正确的数据类型。您还可以根据需要调整接口定义。
我们实现了可重用的searchBox，并在多个包含对象类型模型的组件中使用它。因此，我们希望从 searcBox 接收结果作为对象模型并将其发送到后端进行过滤等
还有另一种选择，但不推荐，因为它可能会导致遗漏一些错误:) 我们可以禁用noImplicitAny 类型检查编译器选项。