javascript - 在 *ngfor(Angular) 中插入具有特定样式属性的动态元素

Question

我已经引用 youtube 教程实现了拖放功能

我有 *ngFor 将从现有 roomsFloorZone 数组生成 div，现在我的目标是使用样式属性和从提供给相同 *ngFor 的后端响应接收的值生成 div，因为所有 div 来自现有 roomsFloorZone 或后端响应需要在同一个父 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

  <div id="toget" class="dropzone" [ngStyle]="{'width':'100%','background- 
     image': 'url('+urlFloorZoneIn+')','background-repeat': 'no-repeat',
     'background-position': 'center', 'background-size': '100% 100%', 
     'border':'1px solid black', 'height':'340px'}" appMovableArea 
     appDropzone (drop)="move(currentBox, dropzone1)">

       <div class="box" *ngFor="let box of dropzone1" appDroppable 
         (dragStart)="currentBox = box" appMovable>
        {{ box.dis }}
       </div>

   </div>

我的目标是为从下面的代码片段中获取的 {{box.dis}} 提供样式(转换属性)和(abc 或 def) [我手边有样式和节点值] 到 *ngFor 放置 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>`

所以这个 *ngFor for 应该适用于现有元素(roomsFloorZoneIn)，而且我应该能够插入一些从后端接收的元素(使用它们的样式属性和节点值) 注意:我手边已经有了样式和节点值

Answer 1

如果两个列表可以一个接一个地来，可以用两个分开的<div>的，都带有 *ngFor使用两个数组:

<div class="myEnclosingDiv">
  <div class="firstList" *ngFor="let element of firstArray">
    {{ element.stuff }}
  </div>
  <div class="secondList" *ngFor="let element of secondArray">
    {{ element.otherStuff }}
  </div>
</div>

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