Javascript 如果可能，如何使用循环动态呈现子组件？（8）

我尝试使用循环动态渲染角度组件，但我迷路了

我想要实现的是拖动并重新排列我的组件（我可以使用Dragula-ng2 Dragula实现这一点），但我想将排列保存到本地存储或会话存储中

棘手的部分是我正在使用子组件

<section [dragula]="'VAMPIRES'">
    <div class="first_element_class" id="first_element">
       <my-first-component
       [outputData]="outputData"></my-first-component>
    </div>

    <div class="second_element_class" id="second_element">
       <my-second-component
       [outputData]="outputData"></my-second-component>
    </div>
</section>

更新的HTML代码（假设我将HTML元素添加到对象数组中）

objectHTML:any[]=[{
托伯兰德：`
` 
}];

---

我的问题是，是否真的可以使用ngFor呈现html子组件/元素？我尝试使用domsanizer，但只得到一个空白页（控制台上没有错误）

您可以使用ngFor进行迭代，并通过其选择器多次呈现子组件

components=[1,2,3,4,5]
我为您提供了类似的解决方案。首先，在
ts文件中，将“outputData”声明为
@Input
，并在HTML中使用ngFor。下面是我的示例代码。

自定义控件

HTML:event.component.HTML

<h2>Event {{ event.id }}</h2>
<button (click)="event.hidden = true">Close me</button>



**HTML:*app.component.HTML（您可以在需要的地方使用该代码。）
<button (click)="addEvent()">Add event</button>
<div *ngFor="let event of events">
   <my-event *ngIf="!event.hidden" [event]="event"></my-event>
</div>

添加事件

注意：这里[event]是自定义控件的@Input，*ngFor是循环。

TS:app.component.TS

import { Component, Input } from '@angular/core';
import { Event } from './event';
@Component({
selector: 'my-event',
templateUrl: './event.component.html'
})
export class EventComponent  {
@Input() event: Event;
}
export interface Event 
{
id: number;  
hidden: boolean;
}

import { Component } from '@angular/core';
import { Event } from './event';
@Component({
   selector: 'my-app',
   templateUrl: './app.component.html',
   styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
events: Array<Event> = [1, 2, 3, 4, 5].map(i => ({id: i, hidden: true}));
addEvent() {
    const event = this.events.find(e => e.hidden);
    if (event) {
    event.hidden = false;
    }
  }
}

从'@angular/core'导入{Component}；
从“/Event”导入{Event}；
@组成部分({
选择器：“我的应用程序”，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent{
事件：数组=[1,2,3,4,5].map（i=>（{id:i，hidden:true}））；
addEvent（）{
const event=this.events.find（e=>e.hidden）；
如果（事件）{
event.hidden=false；
}
}
}

注意：请检查代码并通知我。此代码在Stackblitz中也可用
.
请检查我的答案并让我知道。如果它只使用一个子组件，它就可以工作，但是我有多个子组件（不同的div布局）。我将尝试扩展您的代码，看看是否可以通过数组排序重新排列子组件。在深入分析您的代码后，您可以在stackblitz或此处向我提供示例或演示吗？@Linker SJNF hey man。我意识到即使有不同的子组件，只要它通过*ngIf conditionNope，它也会工作。这对我不起作用。我有多个不同的子组件（选择器）
<button (click)="addEvent()">Add event</button>
<div *ngFor="let event of events">
   <my-event *ngIf="!event.hidden" [event]="event"></my-event>
</div>

import { Component } from '@angular/core';
import { Event } from './event';
@Component({
   selector: 'my-app',
   templateUrl: './app.component.html',
   styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
events: Array<Event> = [1, 2, 3, 4, 5].map(i => ({id: i, hidden: true}));
addEvent() {
    const event = this.events.find(e => e.hidden);
    if (event) {
    event.hidden = false;
    }
  }
}