Question

我试图注入一个带有对象数据的棱角材质对话框，以显示在文字云中。

文字标签云：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()函数推入该数组，但是由于该数组位于其中，我不确定如何访问该数组。一个单独的组件/类。

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'}
]

角度将对象数据注入对话框

1 个答案: