angular 将对象数据注入对话框

Question

我正在尝试注入一个 angular-material 对话框，其中包含要在词云中显示的对象数据。

单词标签云：https://www.npmjs.com/package/angular-tag-cloud-module

我在同一页上有 2 个组件：

主要成分：

@Component({
    selector: 'about',
    moduleId: module.id,
    templateUrl: './about.html',
    styleUrls: ['./about.scss']
})

export class MainComponent {
constructor(public dialog: MatDialog) {}
wordcloud(){
    this.dialog.open(CloudTest, {
        data: 
            {text: 'Stock prices', weight: 8, link: 'https://google.com', color: '#ffaaee'}
       });
    }
}

@Component({
    selector: 'about',
    styleUrls: ['./about.scss'],
    template: '<div><angular-tag-cloud [data]="data" [width]="options.width" [height]="options.height" [overflow]="options.overflow"> </angular-tag-cloud></div>'
  })
  export class CloudTest {
    constructor(@Inject(MAT_DIALOG_DATA) public data: CloudData[] = []) {}
    options: CloudOptions = {
        // if width is between 0 and 1 it will be set to the size of the upper element multiplied by the value 
        width : 1000,
        height : 400,
        overflow: false,
    }
}

我HTML这边：

<button (click)="wordcloud()">Fuzzy Test</button>

错误：

core.js:1448 ERROR TypeError: this._dataArr.sort is not a function
    at TagCloudComponent.drawWordCloud (angular-tag-cloud-module.js:110)
    at TagCloudComponent.reDraw (angular-tag-cloud-module.js:90)
    at TagCloudComponent.ngOnChanges (angular-tag-cloud-module.js:44)
    at checkAndUpdateDirectiveInline (core.js:12361)
    at checkAndUpdateNodeInline (core.js:13889)
    at checkAndUpdateNode (core.js:13832)
    at prodCheckAndUpdateNode (core.js:14556)
    at Object.eval [as updateDirectives] (CloudTest.ngfactory.js:25)
    at Object.updateDirectives (core.js:14278)
    at checkAndUpdateView (core.js:13798)

我可以做的另一个选择是在第二个组件中有 data: CloudData[] = []，并从我的 wordcloud() 函数推送到这个数组，但我不确定如何访问该数组，因为它在单独的组件中 / class.

Answer 1

您将此作为数据传递：

data: 
   {text: 'Stock prices', weight: 8, link: 'https://google.com', color: '#ffaaee'}

所以，这是一个对象。

您希望将其作为数据获取：

@Inject(MAT_DIALOG_DATA) public data: CloudData[]

这不匹配。如果你想要一个数组，你需要传递一个数组：

data: [
   {text: 'Stock prices', weight: 8, link: 'https://google.com', color: '#ffaaee'}
]

angular 将对象数据注入对话框

angular injecting object data to dialog box

angular

typescript

angularjs-scope

angular5