将 Json 数组传递给自定义指令 Angular 5答案

【问题标题】：Passing Json array to custom directive Angular 5将 Json 数组传递给自定义指令 Angular 5
【发布时间】：2017-12-26 11:49:50
【问题描述】：

我正在使用 angular 5。我想将一个 json 数组传递给自定义指令。

我的代码：

product.ts

products=[{"laptop":"dell", id:1}, {"laptop":"lenovo", id:2}];

product.html

<div product-data="{{data}}" *ngFor="let data of products"></div>

产品数据.ts

@Directive({
  selector: '[product-data]'
})
export class ProductDetailsDirective {
    @Input('template-thumbnail') productSelected:any;

    ngAfterViewInit() {
      console.log(this.productSelected)
    }
}

在记录 productSelected 时，我得到一个字符串 [object Object] 而不是数组

任何帮助将不胜感激。

【问题讨论】：

您的数组是products，但您传递给您的指令data...这是您的数组的产品（对象）。
插值数据始终是字符串化的。而且我在您的指令中没有看到任何带有product-data 名称的输入

标签： angular typescript angular2-directives

【解决方案1】：

试试这个

<div [product-data]="data" *ngFor="let data of products"></div>

【讨论】：

【解决方案2】：

您可以将@Input('template-thumbnail') productSelected:any[];（这会将其打印为字符串）声明为 @Input('template-thumbnail') productSelected:any[]; 将其声明为数组类型。

或者

您可以使用 JSON.parse 将字符串解析为数组。

JSON.parse(this.productSelected)

【讨论】：

【解决方案3】：

尝试使用这个管道函数

<div product-data="{{data | json}}" *ngFor="let data of products"></div>

我没有对此进行测试。因此，如果在您的指令中您以字符串形式获取数据，只需使用 JSON.parse 将其转换回对象。

另一个解决方案是使用 JSON.stringify 和 JSON.parse 函数。以下是我应该如何在你的情况下使用它们。

product.html

 <div product-data="convertData(data)" *ngFor="let data of products"></div>

product.ts

products=[{"laptop":"dell", id:1}, {"laptop":"lenovo", id:2}];

convertData(data){ 
  return JSON.stringify(data)
}

产品数据.ts

在您的指令类中，只需使用 parse 函数将其转换回 JSON 对象 JSON.parse()

【讨论】：