javascript - 当我们不知道 Typescript 中的属性名称时，以编程方式推送到 Any 类型的数组

Question

我创建了一个带有 items 属性的 Angular 下拉列表组件，例如:项目:任何[]；

此组件的用户可以将项目设置为任何内容的数组，例如:

[{id: "1", xyz: "你好"}, {id: "2", xyz: "世界}]

或

[{abc: "1", def: "john"}, {abc: "2", def: "doe"}]

用户还可以将 itemText 和 itemValue 设置为两个单独的属性:

在组件中它们被声明为:

itemText:字符串；

itemValue:字符串；

我正在尝试创建另一组名为 customItemtext 和 customItemValue 的属性。这将使用户能够将自定义选项添加到最初不属于数据源的项目数组的开头。这里的问题是，我需要在不知道属性名称的情况下推送该项目，因为从技术上讲它们可以是任何东西。

我最初想从 itemText 和 itemValue 属性中获取属性名称，但这是不可能的，因为用户在设置它们的值时可以使用格式。

注意:当用户设置项目数组时，它直接来自查询，因此用户本身无法灵活地添加自定义项目。它需要由我的组件通过属性来完成。

Answer 1

哇，我刚刚构建了这个:InputTagComponent

当您发送预输入源时，它必须是对象数组。然后，与您的类似，我使用 filterKeys = ['firstName','lastName'] 和 displayKeys = ['firstName']。

我不允许用户在使用对象时发送字符串。但是你可以!

以下是我将用户选择的数据添加到表单数组的方法:

 addTag(value: any):void {
    // disallow blanks, duplicates, enforce maxTags limit and disallow string entries when displayKeys is set
    if (
      value == '' ||
      this.maxTags === this.tagsArray.length || 
      this.duplicates(value) || 
      (this.displayKeys !== null && typeof value === 'string')
    ) { return; }

    // if value is a string of comma-separated entries
    if (typeof value === 'string' && value.includes(',')) {
      for (let i = 0, j = value.split(",").length; i < j; i++) {
        this.tagsArray.push(new FormControl(value.split(",")[i]));
        this.onChange(this.tagsArray);
      }
      this.inputValue = '';
      this.float = true;
      return;
    }

    this.inputValue = '';
    this.float = true;
    this.tagsArray.push(new FormControl(value));
    this.onChange(this.tagsArray); // update controller value
  }

删除很容易

  removeTag(i: number):void {
    this.tagsArray.removeAt(i);
    this.onChange(this.tagsArray); // update controller value
  }

对象的重复检查被字符串化，这也比较字符串输入...

  duplicates(value: any): boolean{
    const test = JSON.stringify(value);
    let match: boolean;

    // test for duplicate objects in tag array
    for ( let i = 0, j = this.tagsArray.value.length; i < j; i++ ) {
      let controlVal = JSON.stringify(this.tagsArray.value[i]);

      if (test === controlVal) { 
        return true;
      } else {
        match = false;
      }
    }
    return match;
  }

我希望这会有所帮助，但如果我可以提供更多帮助，请告诉我。另外FWIW我在这里遇到了一个问题，你有什么见解吗:When is Angular's FormArray a traditional array and when is it a FormArray object?