Question

想要使用* ngIf和ng-template显示动态数据。例如，如果courses.length＆gt;我会显示标题'课程列表'。当courses.length == 0

时0或没有课程

到目前为止，我有我的

courses.component.html

<div *ngIf="courses.length > 0; then coursesList else noCourses">
    <ng-template #coursesList>
        List of courses
    </ng-template>
    <ng-template #noCourses>
        No courses yet
    </ng-template>
</div>

我的app.component.html

<app-ng-if-courses [courses]="courses"></app-ng-if-courses>

我的ng-if-courses.component.ts

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

@Component({
  selector: 'app-ng-if-courses',
  templateUrl: './ng-if-courses.component.html',
  styleUrls: ['./ng-if-courses.component.css']
})
export class NgIfCoursesComponent implements OnInit {
  @Input('courses') courses = [];

  constructor() { }

  ngOnInit() {
  }

}

我的app.component.ts

import { } from './ng-if-courses/ng-if-courses.component';
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Angular app';



  // <app-ng-if-courses> 
//    courses = [];//no courses
    courses = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];


}

我认为这将非常简单，但我是在学习AngularJS

动态* ngIf模板

0 个答案: