如何在Angular2中使用ngIf而不使用额外的元素

如何在Angular2中使用ngIf而不使用额外的元素

为了在Angular 2+中使用*ngIf而不使用额外的元素,我们可以使用<ng-container><ng-template>

但在许多情况下,<ng-container>是推荐的。

以下是关于使用*ngIf而不使用额外元素的最佳方案。

app.component.ts:

import { Component } from '@angular/core';
@Component({
  selector: 'my-app-table',
  template: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  
India=[{city:'Hyderabad'}, {city:'Mumbai'}]
  
}
JavaScript

app.component.html :

<h1>ng-container example</h1>
  
 <div *ngFor="let state of India"> 
   <ng-container *ngIf="state.city">
      <p> {{ state.city }} </p>
   </ng-container>
 </div>
HTML

如何在Angular2中使用ngIf而不使用额外的元素?

上述ng-container的代码说明

如果我们检查它,那么我们可以看到没有额外的元素添加在

<

div>标签和之前

标签。

如何在Angular2中使用ngIf而不使用额外的元素?

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程

登录

注册