Question

这应该是一个简单的问题，而作为一个新手，我不知道根本原因是什么。

组件定义：

@Component({
  selector: 'app-angular-demo-web-part',
  templateUrl: './angular-demo-web-part.component.html',
  styleUrls: ['./angular-demo-web-part.component.scss'],
  encapsulation: ViewEncapsulation.Emulated
})
export class AngularDemoWebPartComponent implements OnInit {
  @Input() description: string;
  @Input() _Myitems: any[];//=[{text:"A",value:1},{text:"B",value:2},{text:"C",value:3}];
  @Input() testdescription: string;
  constructor() { }
  singleRootTree: Node<Folder> = mockTree;  
  ngOnInit() {
  }

}

模板：

<p>
  It works! Description: {{description}}
  <br />
  testdescription: {{testdescription}}
  <br/>
  array:{{_Myitems}}
  <treetable [tree]="singleRootTree"></treetable>  
</p>
<div id="navigation" class="DemoA">
  <div class="DemoB">
    <ul>
        <li *ngFor="let item of _Myitems">
          {{ item.text }}
        </li>
    </ul>
  </div>
</div>

渲染角度

public render(): void {
    this.domElement.innerHTML = `<app-angular-demo-web-part description="${ this.properties.description }" testdescription="asasasa" [_Myitems]="[{text:"A1",value:1},{text:"B1",value:2},{text:"C1",value:3}]"></app-angular-demo-web-part>`;
  }

但是数组什么都不显示，如果我直接在component中设置值，数据将显示出来。

结果：

有效！说明：AngularDemo 测试说明：asasasa 数组：

Answer 1

我在.ts文件中为其中的数组创建了单独的数组，并将该数组名称传递给[_Myitems]。

 array = [{text:"A1",value:1},{text:"B1",value:2},{text:"C1",value:3}];

在选择器内

[_Myitems]="array"

stackblitz example

Answer 2

我认为它没有显示，因为您在运行它时并未对其进行初始化。在ngOnInit中进行设置，然后查看其运行情况。如果您不明白，可以选中此link，表示已经提供了答案。

Answer 3

@Input（varname）varname：vartype。

在ngInit上设置断点并检查值，如果没有，请首先检查拼写错误。然后检查右侧值。

angular @input不会将数据传递给组件

3 个答案: