初探Angular 03 元件中模板資料繫結

需要typescript的基本知識，如ts資料型別

1.模板屬性其實html的屬性,如class,style,title等

2.先在header.component.ts中設定乙個title的屬性

3.在模板頁header.component.html中繫結div屬性title　　

<

div 
[title]
='title'
>
設定div的title屬性
div>

4.結果可以看到生成的html中div有title欄位

如果輸出的資料是html，那麼不能直接使用}輸出,這會直接輸出html的文字，包括標籤。

1.定義一段html文字

2.直接輸出

<

div 
[title]
='title'
>
設定div的title屬性
div>
<
div>
<
p>直接輸出將會是原文輸出
p>
}div
>

可見，無法直接輸出html。

3.正確輸出姿勢 使用 [innerhtml] = 'htmlcontent' 的方式輸出，意思是內部html等於這個　　　

<

div 
[title]
='title'
>
設定div的title屬性
div>
<
div>
<
p>直接輸出將會是原文輸出
p>
}div
>
<
br/>
<
div 
[innerhtml] 
= 'htmlcontent'
>
div>

1.輸出json陣列，先定義json陣列personlist

import from '@angular/core';

@component()

export class headercomponent implements oninit

// 定義字段

public title = '這裡是頭部頁';

// 定義html文字

public htmlcontent = '';

public personlist: any = [

]}, ]}];

ngoninit()

}2.修改元件模板

<

div 
[title]
='title'
>
設定div的title屬性
div>
<
div>
<
p>直接輸出將會是原文輸出
p>
}div
>
<
br/>
<
div 
[innerhtml] 
= 'htmlcontent'
>
div>
<
br/>
<
div 
title
="這裡將輸出json陣列"
>
<
ul>
<
li *ngfor
="let person of personlist"
>
id:}
姓名:}
<
br/>
<
ul>
<
li *ngfor
="let item of person.propertys"
>
性別:}
年齡:}
li>
ul>
li>
ul>
div>

Angular03 將資料新增到元件中

準備 已經搭建好angular cli環境 知道如何建立元件 在模板中顯示屬性的值 格式 注意 屬性型別是陣列型別，將多個資料放到乙個陣列陣列中，在賦值給屬性變數 注意 hello 中的 ngfor let name of names 代表乙個屬性，ngfor 表示要在該屬性上使用ngfor指令，n...

VUE Day03元件開發

複習 指令vue自動將記憶體放入介面，不同位置需要不同指令 資料放到內容中，使用雙花括號 插值語法 資料放到屬性中動態繫結，用冒號 反覆根據陣列中元素生成多個元素v for 控制乙個元素顯示隱藏v show 多個元素選其一顯示v if 繫結事件 事件處理函式寫在methods中 如何獲得滑鼠位置，第...

Vue03 元件化開發

將乙個頁面拆分成乙個個小的功能塊，每個功能塊完成屬於自己這部分獨立的功能，從而簡化整個頁面的管理和維護,提高專案的擴充套件性,這樣的流程稱作元件化 我是內容,呵呵呵 父傳子基本原理 借助props 傳遞資料 子傳父基本原理 子元件中，通過 emit 來發射乙個自定義事件。在父元件中，通過v on來監...