在前端中，我們經常可以看到一個列表中，點選某一行的某個按鈕這一行就展開來，呈現一個div，本文來介紹一下這種效果的實現。

首先，我們在Student類中寫一個boolean型別的expand屬性，設預設值為false，也就是預設狀態下是不展開的。

然後我們寫一個expand函式,該函式的功能是將當前物件的expand屬性取反。

expand(student: Student){
    student.expand=!student.expand;
    if(student.expand){
        //這裡可以寫一些當前為展開狀態時做的一些事情
    }
}

在html中呼叫該函式：

(click)="expand(student)"

然後在div模組中判斷當前物件的expand值是否為true，只有在它為true時才顯示div模組：

<div *ngIf="student.expand">

這樣就成功啦~
我們經常可以看到像這樣的小箭頭，在展開與合上時會變方向，實現如下：
需要import以下這個css，官網請戳：https://fontawesome.com/

import 'font-awesome/css/font-awesome.css';

然後就可以使用fa-chevron-up與fa-chevron-down這兩個樣式啦：

[ngClass]
 
="student.expand ? 'fa fa-chevron-up': 'fa fa-chevron-down'"

這樣，就可以在合上的時候箭頭朝下，展開的時候箭頭朝上~