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

Question

I created an Angular dropdown list component with an items property such as: items: any [];

The user of this component is able to set the items to an array of anything such as:

[{id: "1", xyz: "hello"}, {id: "2", xyz: "world}]

or

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

The user can additionally set the itemText and itemValue as two separate properties:

In the component they are declared as:

itemText: string;

itemValue: string;

I am trying to create another set of properties called customItemtext and customItemValue. This will give the user the ability to add a custom option to the beginning of the items array that wasn't originally part of the datasource. The problem here is that I would need to push the item without knowing the property names since they technically could be anything.

I was originally thinking to just get the property names from the itemText and itemValue properties but this isn't possible since the user can use formatting when setting the values of them.

Note: When the user sets the items array it comes directly from a query so the user has no flexibility in adding the custom items themselves. It needs to be done by my component through properties.

Answer 1

Wow I just built this: InputTagComponent

When you send the typeahead source it must be an array of objects. Then, similar to yours, I use filterKeys = ['firstName','lastName'] and displayKeys = ['firstName'] .

I don't allow users to send along a string when objects are being used. But you can!

Here is how I'm adding user selected data to the form array:

 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
  }

Removal is easy

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

Duplicate checks for objects are stringified, which also compares string input...

  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;
  }

I hope this helps but please let me know if I can help more. Also FWIW I'm having an issue with this here is you have any insight: When is Angular's FormArray a traditional array and when is it a FormArray object?