重庆分公司 重庆分公司

• 网站建设
• 网站制作
• 网站营销
• 小程序
• 新闻动态
• 成功案例
• 关于我们
028-86922220

• 网站建设
• 网站制作
• 网站营销
• 小程序
• 新闻动态
• 成功案例
• 关于我们

{{worker.name}}

  {{worker.name}}

  

    Welcome 
  

	ng-if illustration
  
  
  
Hello 
  
Good morning to you,click the button to view
  

Today is Monday and this is a dummy text element to make you feel better

Understanding the ngIf directive with the else clause

怎么使用 *ngFor 指令

我们使用 *ngFor 指令来遍历数组。比如：

    {{ wok }}

我们的组件 TypeScript 文件：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-illustrations',
  templateUrl: './illustrations.component.html',
  styleUrls: ['./illustrations.component.css']
})
export class IllustrationsComponent implements OnInit {
  workers: any = [

    'worker 1',

    'worker 2',

    'worker 3',

    'worker 4',

    'worker 5',

  ]

  constructor() { }

  ngOnInit(): void {
  }

}

怎么使用 *ngSwitch 指令

译者加：这个指令实际开发很有用

我们使用 ngSwitch 来根据不同条件声明来决定渲染哪个元素。*ngSwitch 指令很像我们使用的 switch 语句。比如：

  cups

  Vegetables

  Trousers

  My Shopping

在 typescript 中：

Myshopping: string = '';

我们有一个 MyShopping 变量，它有一个默认值，用于在模块中渲染满足条件的特定元素。

当条件值是 true 的时候，相关的元素就会被渲染到 DOM 中，其余的元素将被忽略。如果没有元素匹配，则渲染 *ngSwitchDefault 的元素到 DOM 中。

Angular 中我们什么时候需要用结构指令呢？

如果你想在 DOM 中添加或者移除一个元素的时候，你就应该使用结构指令。 当然，我们还可以使用它们来更改元素 CSS 样式，或者添加事件监听器。甚至可以使用它们来创建一个之前不存在的新的元素。

最好的规则是：当我们正在考虑操作 DOM 的时候，那么是时候使用结构指令了。

到此，关于“Angular的结构指令如何使用”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！