Angular ngIf呈现元素位于另一个元素之前

因此，我有以下结构：

<div *ngIf="condition" #div1>
    <div>
        <span>foo</span>
    </div>
</div>
<div *ngIf="condition" #div2> <!-- Hidden at first-->
    <div>
        <span>bar</span>
    </div>
</div>
<div *ngIf="condition" #div3> 
    <div>
        <span>fooBar</span>
    </div>
</div>

因此，当我从mat选择一个选项以显示div2时，它会在div3之后渲染。有没有办法使用Angular 8使其在div1之后、div3之前的位置进行渲染

编辑：所以我重新检查了没有任何属性的代码，事实上正如你提到的那样工作。我正在处理的项目在浏览器中打开了一个窗口，其中有一个带有两个按钮的工具栏，一个按钮用于缩小窗口内部窗口而不是浏览器，另一个按钮用于展开它。我的老板使用css网格根据内部窗口大小对UI元素进行排序，因此当我使用带有该指令的ngIf时，它会将div2呈现在末尾，而不是正确的位置

指令：

redimensionElementos() {
    this.dispositivo();
    const elements = this.el.nativeElement.querySelectorAll('div');
    //  const salto: Boolean = false;
    const celdas: any[] = [];
    elements.forEach(element => {
      const lst: Number[] = JSON.parse(element.getAttribute('someattribute'));
      if (lst) {
        const celdaNum = lst[this.disp];
        if (celdaNum > 0 && celdaNum <= this.colum) {
          celdas.push([celdaNum, null]);
        }
      }
    });

    let fila = 0;
    const total: any[] = [];
    const col = 12;
    let casillas: any[];
    let pos = 0;

    do {
      if (!casillas) {
        casillas = [];
      }
      if ((casillas.length + celdas[pos][0]) <= col) {
        // console.log(pos + ' -- ' + celdas[pos][0]);
        for (let i = 0; i < celdas[pos][0]; i++) {
          casillas.push('pos' + pos + 'fil' + fila + 'c' + celdas[pos][0] + 's');
          celdas[pos][1] = 'pos' + pos + 'fil' + fila + 'c' + celdas[pos][0] + 's';
        }
        total[fila] = casillas;
      } else {
        pos--;
        casillas = null;
        fila++;
      }
      pos++;
    } while (pos < celdas.length);

    for (let i = 0; i < total.length; i++) {
      const agregar = col - total[i].length;
      if (agregar > 0) {
        for (let j = 0; j < agregar; j++) {
          total[i].push('vacio' + i);
        }
      }
    }

    let areas = '';
    for (let i = 0; i < total.length; i++) {
      areas += '\'';
      for (let j = 0; j < total[i].length; j++) {
        areas += total[i][j] + ' ';
      }
      areas += '\' \n';
    }

    let pos1 = 0;
    elements.forEach(element => {
      const lst: Number[] = JSON.parse(element.getAttribute('someattribute'));
      if (lst) {
        const celdaNum = lst[this.disp];
        if (celdaNum > 0 && celdaNum <= this.colum) {
          this.renderer.setElementStyle(element, 'grid-area', celdas[pos1][1] + '');
          pos1++;
        }
      }
    });
    this.renderer.setElementStyle(this.el.nativeElement, 'display', 'grid');
    this.renderer.setElementStyle(this.el.nativeElement, 'grid-template-areas', areas);
  }

  dispositivo() {
    this.ancho = this.el.nativeElement.offsetWidth;
    if (this.ancho < UtilSuma.MOBIL) {
      this.disp = 0;
    } else if (this.ancho < UtilSuma.TABLET) {
      this.disp = 1;
    } else {
      this.disp = 2;
    }
  }
}

我的组件的html：

<div appGrupo [colum]="12" style="margin: 10px">
  <!-- CHECKBOXES TIPO DE PERSONA-->
  <div someattribute="[12,12,12]">
    <label class="example-margin">Tipo de Persona:</label>
    <mat-checkbox class="chk-margin" [(ngModel)]="bCliente" name="cliente" (change)="onCheckValidation($event)">Cliente
    </mat-checkbox>
    <mat-checkbox class="chk-margin" [(ngModel)]="bProveedor" name="proveedor" (change)="onCheckValidation($event)">
      Proveedor
    </mat-checkbox>
    <mat-checkbox class=" chk-margin" [(ngModel)]="bEmpTransporte" name="transportista"
      (change)="onCheckValidation($event)">
      Emp. Transporte
    </mat-checkbox>
  </div>
  <div someattribute=" [12,6,2]">
    <mat-form-field style="width: 95%">
      <mat-label>Tipo de documento</mat-label>
      <!-- <mat-select (selectionChange)="selecDocType($event.value)" name="c1"> -->
      <mat-select name="c1" [(ngModel)]="selected">
        <!-- <mat-option *ngFor="let bean of lstTipos" [value]="beanTipo">
          {{bean.data1}}
        </mat-option> -->
        <mat-option *ngFor="let item of lstTipos" [value]="item">
          {{item.nombreCorto}}
        </mat-option>
      </mat-select>
    </mat-form-field>
  </div>

  <div someattribute="[12,6,2]" *ngIf="selected.nombreCorto !== 'SIN DOCUMENTO'">
    <mat-form-field>
      <input matInput placeholder="N° Documento" type="text">
      <mat-error></mat-error>
    </mat-form-field>
  </div>

  <div someattribute="[12,6,4]" *ngIf="selected.nombreCorto === 'RUC'">
    <mat-form-field>
      <input matInput placeholder="Razón social" type="text">
      <mat-error></mat-error>
    </mat-form-field>
  </div>
  <div someattribute="[12,6,2]">
    <mat-form-field>
      <input matInput placeholder="Nombres" type="text">
      <mat-error></mat-error>
    </mat-form-field>
  </div>
  <div someattribute="[12,6,2]">
    <mat-form-field>
      <input matInput placeholder="Apellido" type="text">
      <mat-error></mat-error>
    </mat-form-field>
  </div>
  <div someattribute="[12,6,2]">
    <mat-form-field>
      <input matInput placeholder="Correo" type="text">
      <mat-error></mat-error>
    </mat-form-field>
  </div>
  <div someattribute="[12,6,2]" *ngIf="selected.nombreCorto === 'RUC'">
    <mat-form-field>
      <input matInput placeholder="Giro de negocio" type="text">
      <mat-error></mat-error>
    </mat-form-field>
  </div>
  <div someattribute="[1,6,2]">
    <button mat-flat-button="primary" style="text-transform: uppercase;" color="primary">
      <mat-icon>save</mat-icon>
    </button>
  </div>
</div>

首先，它不应该在错误的位置渲染

但是，根据您所做的工作，您可以让占位符准确地标记您想要组件的位置—一个不会破坏您的设计或在空时占用任何空间的容器。例如，您可以尝试将*ngIf移动到内部：

福 酒吧 福巴

---

以stackblitz的形式发布一个完整的最小示例，再现问题。我觉得很难相信。结帐