zoukankan      html  css  js  c++  java
  • [Angular 8] Keep original DOM structure with ng-container

    ng-container is using for grouping elments together, a bit similar to div.

    If you want to group some elements together, but don't want to break the DOM structure, you can use ng-container.

    For example:

    <p>
      I turned the corner
      <span *ngIf="hero">
        and saw {{hero.name}}. I waved
      </span>
      and continued on my way.
    </p>

    You also have a CSS style rule that happens to apply to a <span> within a <p>aragraph.

    css:

    p span { color: red; font-size: 70%; }

    The p span style, intended for use elsewhere, was inadvertently applied here.

    Another problem: some HTML elements require all immediate children to be of a specific type. For example, the <select> element requires <option> children. You can't wrap the options in a conditional <div> or a <span>.

    <div>
      Pick your favorite hero
      (<label><input type="checkbox" checked (change)="showSad = !showSad">show sad</label>)
    </div>
    <select [(ngModel)]="hero">
      <span *ngFor="let h of heroes">
        <span *ngIf="showSad || h.emotion !== 'sad'">
          <option [ngValue]="h">{{h.name}} ({{h.emotion}})</option>
        </span>
      </span>
    </select>

    Using ng-contianer:

    <p>
      I turned the corner
      <ng-container *ngIf="hero">
        and saw {{hero.name}}. I waved
      </ng-container>
      and continued on my way.
    </p>

    <div>
      Pick your favorite hero
      (<label><input type="checkbox" checked (change)="showSad = !showSad">show sad</label>)
    </div>
    <select [(ngModel)]="hero">
      <ng-container *ngFor="let h of heroes">
        <ng-container *ngIf="showSad || h.emotion !== 'sad'">
          <option [ngValue]="h">{{h.name}} ({{h.emotion}})</option>
        </ng-container>
      </ng-container>
    </select>

  • 相关阅读:
    汇编笔记
    【BZOJ 1701】Cow School(斜率优化/动态凸包/分治优化)
    MS-DOS 6.22 +Vim+masm 汇编环境
    「NOIP2017」时间复杂度
    CCF 201809-3 元素选择器
    CCF 201712-3 Crontab
    ICPC NWERC2019~2020 Practice Contest
    蓝桥杯模拟赛3 F:等差等比有联系 公差公比求通项
    CCF 201509-3 模板生成系统
    CCF 201503-3 节日
  • 原文地址:https://www.cnblogs.com/Answer1215/p/11637556.html
Copyright © 2011-2022 走看看