当特定条件在AngularJS中为true时，如何显示/隐藏数据？

在AngularJS中，为了隐藏或显示数据或内容，我们可以使用* ngIf结构指令。通过使用它，我们可以评估条件，然后基于条件的* ngIf将显示内容。例如，如果* ngIf的条件为true，则将显示内容，如果条件为false，则将不显示内容。

方法：

• 为了给出清晰和详尽的视图，我将通过一个示例来解释该概念。
• 考虑我们在.ts文件中有一个对象数组，并且该数组中的对象包含技术公司和非技术公司的列表。
• 此实验的目的是显示所有技术公司的数据，并隐藏所有非技术公司的数据。
• 为了遍历数组，我们将在.html文件中使用* ngFor指令。
• 完成实现后，启动服务器。

执行：

app.component.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
    }
  ]
}

app.module.ts：

Java脚本

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 { }

app.component.html：

的HTML

    

         {{company.name}} 
    
    

输出：您可以清楚地看到第三个项目是隐藏的，因为其条件为假。为了给出一个更加可见的示例，我将其留空。