久久精品中文字幕av,av.涩涩涩涩涩涩涩涩,亚洲国产日韩欧美精品成人久久久,成人福利电影免费在线观看,日产国产原创av,日韩av午夜激情,bt天堂中文字幕,超级碰人妻在线视频,欧美老熟妇久久一区二区

在Angular中可以按如下方法來獲取V層中的表單數(shù)據(jù)。 * 在C層中定義變量`a`。 * 在V層的表單中使用**[(ngModel)]**將C層的變量`a`綁定到相應(yīng)的表單上。 經(jīng)過上述兩步操作，我們在C層中再次獲取變量`a`的值時，便是用戶在表單中輸入的最新值了。 # 在C層中進(jìn)行初始化 app/teacher-add.component.ts ```js import {Component, OnInit} from '@angular/core'; /** * 教師添加組件 */ @Component({ selector: 'app-teacher-add', templateUrl: './teacher-add.component.html' }) export class TeacherAddComponent implements OnInit { name: string; ? username: string; ? email: string; ? sex: boolean; ? ngOnInit(): void { } } ``` * ???? 定義教師的四個屬性，默認(rèn)均為`public`類型 ，可以直接在V層對其進(jìn)行操作 # 在V層中將數(shù)據(jù)綁定到表單 teacher-add.component.html ```html <pre>{{name}} {{username}} {{email}} {{sex}}</pre> ? <form id="teacherAddForm"> <div> <label for="name">姓名：</label> <input type="text" id="name" name="name" [(ngModel)]="name"/> ? </div> <div> <label for="username">用戶名：</label> <input type="text" id="username" name="username" [(ngModel)]="username"> </div> <div> <label for="email">郵箱：</label> <input type="email" id="email" name="email" [(ngModel)]="email"> </div> <div> <label>性別：</label> <label> <input type="radio" name="sex" value="true" [(ngModel)]="sex"> 男</label> <label> <input type="radio" name="sex" value="false" [(ngModel)]="sex"> 女</label> </div> <div> <button>提交</button> </div> </form> ``` * ?前臺直接打印各變量的值，用于開發(fā)測試時實時的顯示變量的內(nèi)容。 * ?通過`[(ngModel)]`來綁定`name`變量的值至`input`輸入框。 > 在開發(fā)的過程中要養(yǎng)成直接在前臺打印對象的習(xí)慣。 **[(ngModel)]**是`Angular`的一個內(nèi)置的指令，該指令在表單中使用。它的作用很神奇：如果C層中變量發(fā)生變化，那么V層中綁定該變量的表單也會同時發(fā)生變化；如果V層中綁定該變量的表單值發(fā)生變化，那么C層中的變量也會同時發(fā)生變化。我們把上述現(xiàn)實又叫做“數(shù)據(jù)雙向綁定”。 # 測試 打開[http://localhost:4200/add](http://localhost:4200/add)，控制臺出現(xiàn)如下錯誤： ``` Uncaught Error: Template parse errors: Can't bind to 'ngModel' since it isn't a known property of 'input'. (" ``` 它說出現(xiàn)了模板解析錯誤：不能夠?qū)ngModel`綁定給`input` , 因為它還不是`input`的可用屬性。這是由于當(dāng)我們在V層的某個標(biāo)簽中使用如`[xxx]`時，angular后把`xxx`做為`屬性型指令`嘗試解決。當(dāng)找不到`xxx`指令時，就會出現(xiàn)類似于上述的錯誤。同組件屬于模塊一樣`屬性型指令`同樣是依賴于模塊存在的，我們在調(diào)用某個`屬性型指令`之間，需要引入其所在的模塊。`ngModel`指令在`FormsModule`中，我們在`AppModule`中將其引用以規(guī)避該錯誤。 app.module.ts ```js import {FormsModule} from '@angular/forms'; imports: [ BrowserModule, AppRoutingModule, HttpClientModule, FormsModule ], ``` 此時，我們再次訪問[http://localhost:4200/add](http://localhost:4200/add)，控制臺錯誤消失。  # 本節(jié)小測 * 我們已經(jīng)學(xué)習(xí)過了`ngFor`、`ngIf`、`ngModel`，請嘗試總結(jié)在功能及使用方法上的異同點。 * 請設(shè)置一個測試**數(shù)據(jù)雙向綁定**的方法。 ## 上節(jié)答案 具體過程略，請參考以下步驟自行完成。 * 建立組件（CV層）。 * 添加路由。 * 將組件添加到AppModule的組件聲明列表中。 * 在瀏覽器輸入http://localhost:4200/edit進(jìn)行測試。 # 參考文檔 | 名稱 | 鏈接 | 預(yù)計學(xué)習(xí)時長(分） | | --- | --- | --- | | 模板驅(qū)動表單 |[https://www.angular.cn/guide/forms](https://www.angular.cn/guide/forms) | 10 | | 屬性型指令 |[https://www.angular.cn/guide/attribute-directives](https://www.angular.cn/guide/attribute-directives) | 15 | | 源碼地址 | [https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step2.3.2](https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step2.3.2) | - |