Angular中@Input，*ngFor，*ngIF的使用方法_angular input *ngif=-优快云博客

本文链接：https://blog.youkuaiyun.com/fairyss/article/details/104531053

本文详细介绍了在Angular中如何使用@Input装饰器传递数据，以及结合*ngFor和*ngIf指令进行条件渲染和列表遍历。通过实例展示了从父组件向子组件传递数据的流程，以及子组件如何在模板中使用这些数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

子component的html

<div class="noData" *ngIf="List.length==0">无资料</div>
<div *ngFor="let item of List">
    id:{{item.id}}|content:{{item.content}}
    <hr>
</div>

子component的ts

import { Component, OnInit, Input } from '@angular/core';
import {Todo} from '../../models/todo'
@Component({
  selector: 'app-todo-list',
  templateUrl: './todo-list.component.html',
  styleUrls: ['./todo-list.component.css']
})
export class TodoListComponent implements OnInit {
  
  @Input() List;
  
  constructor() { }

  ngOnInit(){
    
  }

}

父HTML

<app-todo-list [List]=List></app-todo-list>

父ts

import { Component, OnInit } from '@angular/core';
import {Todo} from '../../models/todo'

@Component({
  selector: 'app-todo',
  templateUrl: './todo.component.html',
  styleUrls: ['./todo.component.css']
})
export class TodoComponent implements OnInit {

  public List:Todo[]=[];

  constructor() { }

  ngOnInit(): void {
	  {id:1,content:'Test'},
      {id:2,content:'Test2'},
      {id:3,content:'Test3'},
  }

}

代码运行顺序，父ts声明List->父html将List传到子ts->子ts接受List（@Input）->子html调用子ts中接受的List->父html显示子html