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

试试这个

.json()

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对象JSON.parse（）

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

3 个答案: