传单弹出窗口内的角度动态组件-ngFor不起作用答案

【问题标题】：Angular dynamic component inside leaflet popup - ngFor not working传单弹出窗口内的角度动态组件-ngFor不起作用
【发布时间】：2020-06-03 14:55:18
【问题描述】：

我遵循了这个solution，在传单弹出窗口中创建动态组件。我可以渲染我的组件。但是当我尝试使用 *ngFor 得到以下错误

我的父组件代码来呈现弹出窗口

let popup = L.popup();
        this.zone.run(() => {
            if (this.componentRef) {
                this.componentRef.destroy();
            }
            const compFactory = this.resolver.resolveComponentFactory(
                LeafletPopupComponent
            );
            this.componentRef = compFactory.create(this.injector);
            if (this.appRef["attachView"]) {
                // since 2.3.0
                this.appRef["attachView"](this.componentRef.hostView);
                this.componentRef.onDestroy(() => {
                    this.appRef["detachView"](this.componentRef.hostView);
                });
            } else {
                this.appRef["registerChangeDetector"](
                    this.componentRef.changeDetectorRef
                );
                this.componentRef.onDestroy(() => {
                    this.appRef["unregisterChangeDetector"](
                        this.componentRef.changeDetectorRef
                    );
                });
            }
            this.componentRef.instance.parent_text = "msg from parent";
            this.componentRef.instance.items = [
                "workstation 1",
                "workstation 2"
            ];
            let div = document.createElement("div");
            div.appendChild(this.componentRef.location.nativeElement);
            popup.setContent(div);
        });
        this.markerObj.bindPopup(popup).addTo(this.map);

动态组件html代码

<div class="container">
    <h5>Step 1</h5>
    <span>Name the selected type of workstation</span>
    {{ parent_text }}
    <div class="form-group w-100" *ngIf="items?.length">
        <select class="form-control">
            <option value="">Select</option>
            <option *ngFor="let item of items" [value]="item">
                {{item}}
            </option>
        </select>
    </div>
    <h5>Step 2</h5>
    <a> Mark Area <i class="fa fa-pencil"></i></a>
</div>

动态组件ts文件

export class LeafletPopupComponent{
    @Input() items;
    @Input() parent_text: string;
    constructor() {}
}

注意我可以成功地从父组件渲染 parent_text 消息。请帮忙。

【问题讨论】：

标签： angular leaflet

【解决方案1】：

请确保组件所属的模块导入CommonModule。然后尝试通过json管道进行调试。

<div class="container">
    <h5>Step 1</h5>
    <span>Name the selected type of workstation</span>
    {{ items | json }} <!-- <- add this -->
    {{ parent_text }}
</div>

【讨论】：

嗨@satanTime。如果我注释掉我的 ngFor 代码并检查 {{items | json }} 我可以看到数据数组。所以我认为我的视图是在子组件接收到父组件的数据之前呈现的。如何解决这个问题？
啊哈，很好，你收到["workstation 1", "workstation 2"]了吗？您能否验证CommonModule 是否已导入相关模块？
是的，我已经在 app.module.ts 中导入了我的动态组件和 commonModule，并且我在声明和 entryComponent 中都添加了我的动态组件。水平。