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

Question

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

产品-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

在你的指令中 class 只需使用解析函数将其转换回 JSON 对象 JSON.parse()

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

Passing Json array to custom directive Angular 5

typescript

angular2-directives

angular