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

Question

我正在使用角度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>

产品data.ts

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

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

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

任何帮助将不胜感激。

Answer 1

试试这个

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

Answer 2

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

要么

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

JSON.parse(this.productSelected)

Answer 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)
}

产品data.ts

在指令类中，只需使用parse函数将其转换回JSON Object JSON.parse（）