Angular 2 数据显示方法

在 Angular 2 中，数据显示主要通过数据绑定技术实现。Angular 提供了多种数据绑定方式，包括插值、属性绑定、事件绑定和双向绑定。

插值绑定 使用双大括号 {``{ }} 将组件中的数据插入到模板中：

typescript 复制代码

// 组件类
export class MyComponent {
  title = 'Hello Angular';
}

html 复制代码

<!-- 模板 -->
<h1>{{ title }}</h1>

属性绑定 使用方括号 [] 将组件属性绑定到 HTML 元素的 DOM 属性：

typescript 复制代码

export class MyComponent {
  imageUrl = 'path/to/image.jpg';
}

html 复制代码

<img [src]="imageUrl" alt="Sample Image">

ngFor 指令 用于循环显示数组数据：

typescript 复制代码

export class MyComponent {
  items = ['Item 1', 'Item 2', 'Item 3'];
}

html 复制代码

<ul>
  <li *ngFor="let item of items">{{ item }}</li>
</ul>

ngIf 指令 根据条件显示或隐藏元素：

typescript 复制代码

export class MyComponent {
  isVisible = true;
}

html 复制代码

<div *ngIf="isVisible">This will be shown when isVisible is true</div>

双向数据绑定 使用 [(ngModel)] 实现表单元素与组件属性的双向绑定：

typescript 复制代码

export class MyComponent {
  name = '';
}

html 复制代码

<input [(ngModel)]="name" placeholder="Enter your name">
<p>You entered: {{ name }}</p>

数据显示最佳实践

使用管道格式化显示数据：

typescript 复制代码

export class MyComponent {
  today = new Date();
  price = 19.99;
}

html 复制代码

<p>Today is {{ today | date }}</p>
<p>Price: {{ price | currency:'USD' }}</p>

创建自定义管道处理特殊数据显示需求：

typescript 复制代码

@Pipe({ name: 'reverse' })
export class ReversePipe implements PipeTransform {
  transform(value: string): string {
    return value.split('').reverse().join('');
  }
}

html 复制代码

<p>{{ 'hello' | reverse }}</p>  <!-- 显示 'olleh' -->

使用安全导航操作符 ?. 防止空值错误：

typescript 复制代码

export class MyComponent {
  user = { name: 'John' };
}

html 复制代码

<p>User name: {{ user?.name }}</p>

高级数据显示技巧

使用 ng-container 优化模板结构：

html 复制代码

<ng-container *ngIf="condition">
  <p>Content that depends on condition</p>
</ng-container>

使用 ng-template 定义可复用的模板：

html 复制代码

<ng-template #loading>
  <p>Loading...</p>
</ng-template>

<div *ngIf="dataLoaded; else loading">
  <!-- 显示加载完成的内容 -->
</div>

通过服务获取数据并显示：

typescript 复制代码

@Injectable()
export class DataService {
  getData() {
    return of(['Data 1', 'Data 2', 'Data 3']); // 返回Observable
  }
}

@Component({
  selector: 'app-data',
  template: `
    <ul>
      <li *ngFor="let item of data$ | async">{{ item }}</li>
    </ul>
  `
})
export class DataComponent {
  data$ = this.dataService.getData();
  
  constructor(private dataService: DataService) {}
}