|
@@ -1,51 +1,50 @@
|
|
|
<div class="page-content">
|
|
|
- <div class="search-area">
|
|
|
- <div class="left-component">
|
|
|
- <select [(ngModel)]="selectedOption">
|
|
|
- <option value="frontend">大前端</option>
|
|
|
- <option value="backend">后端开发</option>
|
|
|
- <option value="mobile">移动开发</option>
|
|
|
- </select>
|
|
|
- </div>
|
|
|
- <div class="right-component">
|
|
|
- <input type="text" placeholder="搜索课程/技术">
|
|
|
- </div>
|
|
|
+ <div class="search-area">
|
|
|
+ <div class="left-component">
|
|
|
+ <select [(ngModel)]="selectedOption">
|
|
|
+ <option value="frontend">大前端</option>
|
|
|
+ <option value="backend">后端开发</option>
|
|
|
+ <option value="mobile">移动开发</option>
|
|
|
+ </select>
|
|
|
</div>
|
|
|
- <div class="quick-links">
|
|
|
- <h1>{{lessonName}}</h1>
|
|
|
-
|
|
|
- <!-- 指令:*ngFor循环指令 *ngIf条件指令 ng-container虚拟DOM容器 -->
|
|
|
- <ul style="font-size: 36px;">
|
|
|
- <ng-container *ngFor="let lesson of lessonList;let i = index">
|
|
|
- <li *ngIf="lesson.isEnabled" (click)="goDetail(lesson)">
|
|
|
- 课程{{i+1}}:{{lesson.name}}
|
|
|
- </li>
|
|
|
- </ng-container>
|
|
|
- </ul>
|
|
|
+ <div class="right-component">
|
|
|
+ <input type="text" placeholder="搜索课程/技术">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="quick-links">
|
|
|
+ <h1>{{lessonName}}</h1>
|
|
|
|
|
|
- <!-- 组件:通过selector标签引用组件,并通过@Input传参,用[]传递变量 -->
|
|
|
+ <!-- 指令:*ngFor循环指令 *ngIf条件指令 ng-container虚拟DOM容器 -->
|
|
|
+ <ul style="font-size: 36px;">
|
|
|
<ng-container *ngFor="let lesson of lessonList;let i = index">
|
|
|
- <app-comp-lesson-card [name]="lesson.name" [author]="lesson.author" [lesson]="lesson"
|
|
|
- *ngIf="lesson.isEnabled" (click)="goDetail(lesson)"></app-comp-lesson-card>
|
|
|
+ <li *ngIf="lesson.isEnabled" (click)="goDetail(lesson)">
|
|
|
+ 课程{{i+1}}:{{lesson.name}}
|
|
|
+ </li>
|
|
|
</ng-container>
|
|
|
+ </ul>
|
|
|
|
|
|
- <!-- 组件:通过selector标签引用组件,并通过@Input传参 -->
|
|
|
- <app-comp-lesson-card [name]="title"></app-comp-lesson-card>
|
|
|
- <app-comp-lesson-card [name]="'title123'"></app-comp-lesson-card>
|
|
|
- <app-comp-lesson-card name="666"></app-comp-lesson-card>
|
|
|
- <app-comp-lesson-card name="{{title}}"></app-comp-lesson-card>
|
|
|
- <app-comp-lesson-card></app-comp-lesson-card>
|
|
|
- <app-comp-lesson-card></app-comp-lesson-card>
|
|
|
- <app-comp-lesson-card></app-comp-lesson-card>
|
|
|
- <!-- 添加更多的行 -->
|
|
|
+ <!-- 组件:通过selector标签引用组件,并通过@Input传参,用[]传递变量 -->
|
|
|
+ <ng-container *ngFor="let lesson of lessonList;let i = index">
|
|
|
+ <app-comp-lesson-card [name]="lesson.name" [author]="lesson.author" [lesson]="lesson"
|
|
|
+ *ngIf="lesson.isEnabled" (click)="goDetail(lesson)"></app-comp-lesson-card>
|
|
|
+ </ng-container>
|
|
|
+
|
|
|
+ <!-- 组件:通过selector标签引用组件,并通过@Input传参 -->
|
|
|
+ <app-comp-lesson-card [name]="title"></app-comp-lesson-card>
|
|
|
+ <app-comp-lesson-card [name]="'title123'"></app-comp-lesson-card>
|
|
|
+ <app-comp-lesson-card name="666"></app-comp-lesson-card>
|
|
|
+ <app-comp-lesson-card name="{{title}}"></app-comp-lesson-card>
|
|
|
+ <app-comp-lesson-card></app-comp-lesson-card>
|
|
|
+ <app-comp-lesson-card></app-comp-lesson-card>
|
|
|
+ <app-comp-lesson-card></app-comp-lesson-card>
|
|
|
+ <!-- 添加更多的行 -->
|
|
|
+ </div>
|
|
|
+ <div class="course-area">
|
|
|
+ <div class="filter-tags">
|
|
|
+ <!-- 添加筛选标签 -->
|
|
|
</div>
|
|
|
- <div class="course-area">
|
|
|
- <div class="filter-tags">
|
|
|
- <!-- 添加筛选标签 -->
|
|
|
- </div>
|
|
|
- <div class="course-list">
|
|
|
- <!-- 添加课程列表 -->
|
|
|
- </div>
|
|
|
+ <div class="course-list">
|
|
|
+ <!-- 添加课程列表 -->
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
+</div>
|