Javascript 在*ngfor（角度）中插入具有特定样式属性的动态元素的步骤

我已经在youtube教程中实现了拖放功能

我有*ngFor，它将从现有roomsFloorZone数组生成div，现在我的目标是使用样式属性和从提供给同一*ngFor的后端响应接收的值生成div，因为来自现有roomsFloorZone或后端响应的所有div都需要位于同一父div下

我尝试了roomsFloorZone中已有的元素

import {Component, OnInit, AfterViewInit, Input, SimpleChange,
SimpleChanges} from '@angular/core';


@Component({
  selector: 'floor-zone',
  templateUrl: './floorzone.component.html',
  styleUrls: ['./floorzone.component.scss']
 })

export class FloorZoneComponent{

   urlFloorZoneIn: any;
   roomsFloorZoneIn: any;
   @Input() urlFloorZone;
   @Input() roomsFloorZone;
   @Input() currentBoxFloorZone;


 ngOnChanges(changes: SimpleChanges) {
    if (changes.urlFloorZone && changes.urlFloorZone.currentValue) {
        this.urlFloorZoneIn = changes.urlFloorZone.currentValue;
    }
    if (changes.roomsFloorZone && changes.roomsFloorZone.currentValue) {
        this.roomsFloorZoneIn = changes.roomsFloorZone.currentValue
    }
  }

  dropzone1 = [];

  currentBox?: string = this.currentBoxFloorZone;

  move(box: string, toList: string[]): void {
    box = this.currentBoxFloorZone;
        this.removeBox(box, this.roomsFloorZoneIn);
        this.removeBox(box, this.dropzone1);
        toList.push(box);

   }

   removeBox(item: string, list) { 
        if (list.indexOf(item) !== -1) {
            list.splice(list.indexOf(item), 1);
            }
    }
    }

我有一个现有的roomsFloorZoneIn数组，我从中拖放下面html中的元素，*ngfor用于此

html

{{box.dis}

我的目标是为{box.dis}提供样式（transform属性）和（abc或def），这些样式取自下面的代码片段 [我手边有样式和节点值] 至*Ng，用于放置div

 `<div xmlns="http://www.w3.org/1999/xhtml">
   <!--bindings={
   "ng-reflect-ng-for-of": ""
    }-->

    <div _ngcontent-c5="" appdroppable="" appmovable=""
      class="box draggable movable ng-star-inserted" touch-action="none"
      style="transform: translateX(183.2%) translateY(56%);"> abc 
      <span _ngcontent-c5="">X</span>
     </div>

    <div _ngcontent-c5="" appdroppable="" appmovable=""
      class="box draggable movable ng-star-inserted" touch-action="none"
      style="transform: translateX(183.2%) translateY(56%);"> def 
      <span _ngcontent-c5="">X</span>
    </div>

   </div>`

`
abc
X
def
X
`

因此，这个*ngFor应该适用于现有元素（roomsFloorZoneIn），并且我应该能够插入从后端接收的一些元素（使用它们的样式属性和节点值）

---

注意：我已经准备好了样式和节点值

如果两个列表可以一个接一个地出现，您可以使用两个单独的

，两个都带有

*ngFor

，使用两个数组：

{{element.stuff}}
{{element.otherStuff}

---

另一方面，如果需要以某种方式混合这两个列表，您只需在您的TypeScript代码中创建一个新数组，并使用单个

*ngFor

我不完全确定您在这里要问什么。是否要将某些样式应用于

*ngFor

循环中的某些元素，而将其他样式应用于其他元素？@WillAlexander，不，我的意思是，在名为roomsFloorZoneIn的数组中会有一些元素，我将使用dropzone类在div上拖放，*ngFor将为此操作生成div，uptill这里一切正常，现在我也从后端响应中收到一些元素，我将从中去掉样式属性和值（abc或def），并希望将其传递给相同的*ngFor以生成新的div（如何实现），希望现在我很清楚OK，所以我恐怕还不是很清楚

*ngFor

与iterable一起工作，并为所述iterable中的每个元素创建一个元素。如果要将样式或值属性传递给子元素，则需要在其上创建

@Input

s。这就是你的意思吗？是的，但对于来自roomsFloorZoneIn阵列的元素（将在不做任何更改的情况下创建div），我只希望从后端响应中获得样式和值，并生成除roomsFloorZoneIn阵列生成的div之外的其他新div。我仍然不太理解最终目标

*ngFor

只接受一个iterable。如果你想使用一个新的数组（而不是添加到当前数组中），你需要一个新的

*ngFor

元素。我有一个不同的问题，我已经发布了，如果你能建议的话，那就太好了

 `<div xmlns="http://www.w3.org/1999/xhtml">
   <!--bindings={
   "ng-reflect-ng-for-of": ""
    }-->

    <div _ngcontent-c5="" appdroppable="" appmovable=""
      class="box draggable movable ng-star-inserted" touch-action="none"
      style="transform: translateX(183.2%) translateY(56%);"> abc 
      <span _ngcontent-c5="">X</span>
     </div>

    <div _ngcontent-c5="" appdroppable="" appmovable=""
      class="box draggable movable ng-star-inserted" touch-action="none"
      style="transform: translateX(183.2%) translateY(56%);"> def 
      <span _ngcontent-c5="">X</span>
    </div>

   </div>`