Question

我正在尝试使用角度材料自动完成功能来创建自定义组件，因此我可以在代码中的任何地方使用它，因为我正在传递动态数组，并且对于每个数组，我在某个点处卡住了不同的键。

我尝试过的是

app.component.html

<app-autocomplete [items]="data.attributes" [field]="'caption.default'" inputType="text" inputPlaceholder="placeholder"></app-autocomplete>

autocomplete.component.ts

var str1="";   
     var length= this.field.split(".");
     str1= "'"+length[0]+"']";
     console.log(length.length)
    for(var i=1;i<length.length;i++){

      if(i===length.length-1){
        str1= str1+"['"+length[i];
      }else{
        str1= str1+"['"+length[i]+"']";
      }

    }

    this.field=str1;
     console.log(this.field);

所以它将返回我['abc'] ['xyz']

autocomplete.component.html

<mat-form-field class="example-full-width">
    <input type="{{inputType}}" placeholder="{{inputPlaceholder}}" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto">
    <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let option of items " [value]="option">
        {{option[field]}} 
      </mat-option> 
    </mat-autocomplete>
  </mat-form-field>

我也尝试使用“。” 就像：“ caption.default”

这是行不通的，有人可以帮我解决这个问题吗！！！！

我正在尝试使组件通用，以便在任何可以使用的地方都可以填充@Inputs数据，例如我有两个json

JSON-1

[{
    "caption": {
        "default": "Asset ID"
      }
},
{
    "caption": {
        "default": "Asset ID"
      }
}]

我的第二个json是 JSON-2

[{
    "name": {
        "anything": "Asset ID"
      }
},
{
    "name": {
        "anything": "Asset ID"
      }
}]

所以对于我的第一个json-1，我将像这样使用

<app-autocomplete [items]="data.attributes" [field]="'caption.default'" inputType="text" inputPlaceholder="placeholder"></app-autocomplete>

第二个json-2我会这样使用

<app-autocomplete [items]="data.attributes" [field]="'name.anything'" inputType="text" inputPlaceholder="placeholder"></app-autocomplete>

表示我想传递字段，以便它可以自动遍历并显示数据

Answer 1

我会做类似的事情，但是函数应该是管道，或者数据需要在开始时计算（当使用setter触发数据输入时）

fields: Array<string> = [];

    // build an array with your path
    @Input() set field(fields: string) {
        this.fields = fields.split('.');
    }

    // function to retreive the data
    // You need to make this a pipe 
    getValue(option: any): string {
        let temp: any;
        if (this.fields.length > 0 && option) {
            this.fields.forEach(field => {
                temp = option[field];
            })
        }
    return temp;
    }

html

<mat-option *ngFor="let option of items " [value]="option">
    {{ getValue(option) }} 
</mat-option>

Answer 2

简单的解决方案，但请仔细阅读以了解哪里出了错

更改

this.fields = field.split(".");
{{option[field]}} --->  {{option[fields[0]][fields[1]]}}

让我简化一下，

您基本上是在尝试访问对象的内部属性，该对象是数组的一部分，因此尝试传递现场数据并直接获取它，

关于应有的物品

items[index][ObjectAttr][innerObjAttr]

您的示例JSON1应该是

`items[index][caption][default]`

但是您要做的是

items[index][[caption][default]]

不起作用

Answer 3

我非常感谢@ukn和@shrivenkata pavan kumar mhs

getValue(Obj): any {
    var objPath=this.field.split(".");
      var s="Obj";
      for(var i=0;i<this.field.split(".").length;i++){
       s=s+"['"+objPath[i]+"']";
      }
     return eval(s);
    }

有什么办法可以将json键作为字符串@Input（）传递给angular

3 个答案: