ngIf визуализировать элемент перед другим

Question

Итак, у меня есть следующая структура:

<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-select, чтобы отобразить div2, который он рендерит после div3. Есть ли способ заставить его рендериться в своей позиции (после div1, но перед div3), используя Angular 8?

EDIT: поэтому я перепроверил код без каких-либо атрибутов и фактически работает, как вы упоминаете. Проект, над которым я работаю, открывает окно (внутри браузера) с панелью инструментов с 2 кнопками, одна из которых позволяет уменьшить окно (внутреннее окно, а не браузер), а другая - расширить его. Мой босс сделал директиву, чтобы упорядочить элементы пользовательского интерфейса в зависимости от размера внутреннего окна, используя css -grid, поэтому, когда я использую 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>

Answer 1

Он не должен отображать <div> в неправильном месте для начала (посмотрите на этот пример stackblitz ).

Но, в зависимости от того, что вы делаете, вы можете позволить местозаполнителю пометить, где именно вы хотите компонент (некоторый контейнер, который не нарушит ваш дизайн и не будет занимать никакого пространства, когда пуст). Например, вы можете попробовать переместить *ngIf во внутреннюю <div>:

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