En AngularJS, para ocultar o mostrar datos o contenido, podemos usar la directiva estructural *ngIf . Al usar esto, podemos evaluar las condiciones y luego *ngIf basado en la condición muestra el contenido. Por ejemplo, si la condición para *ngIf es verdadera, se mostrará el contenido y si la condición es falsa, el contenido no se mostrará.
Acercarse:
- Para dar una visión lúcida y elaborada, explicaré el concepto mediante un ejemplo.
- Considere que tenemos una array de objetos en el archivo .ts y los objetos en la array contienen una lista de empresas técnicas y no técnicas.
- El objetivo de este experimento es mostrar los datos de todas las empresas técnicas y ocultar todas las empresas no técnicas.
- Para recorrer la array, usaremos la directiva *ngFor en el archivo .html.
- Una vez que haya terminado con la implementación, inicie el servidor.
Implementación:
aplicación.componente.ts:
Javascript
import { Component } from '@angular/core'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: [ './app.component.css' ] }) export class AppComponent { companies = [ { name: "Microsoft", isTechnical : true, }, { name: "GeeksForGeeks", isTechnical : true }, { name: "Netflix", isTechnical : false }, { name: "TCS", isTechnical : true } ] }
aplicación.módulo.ts:
Javascript
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; @NgModule({ imports: [ BrowserModule, FormsModule ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { }
aplicación.componente.html:
HTML
<ol> <li *ngFor="let company of companies"> <i *ngIf="company.isTechnical"> {{company.name}} </i> </li> </ol>
Salida: puede ver claramente que el tercer elemento está oculto porque su condición es falsa. Para dar un ejemplo más visible, lo dejé en blanco.
Publicación traducida automáticamente
Artículo escrito por bunnyram19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA