# 插值与模板表达式
在更新以前,我们需要根据ID获取到原教师的数据信息,我们为大家在后台内置了两个教师(还包括一些同学们后来添加的数据):id为1的张三以及id为2的李四。在此我们假设用户访问http://localhost:4200/edit/2来尝试编辑李四的基本信息。
> 为了减轻些服务器压力,后台的数据每天凌晨重置一次。
## 获取教师信息
获取某个教师的接口信息如下:
```bash
GET /teacher/{id}
```
| **类型Type** | **名称Name** | **描述Description** | **类型Schema** |
| ------------ | ------------ | ------------------- | ------------------------------------------------------------ |
| Response | | | `{id: number, username: string, name: string, email: string, sex: boolean}` |
根据接口,我们简单整理思路如下:
```typescript
+++ b/first-app/src/app/edit/edit.component.ts
@@ -13,7 +13,9 @@ export class EditComponent implements OnInit {
ngOnInit(): void {
const id = this.activeRoute.snapshot.params.id;
- console.log('获取到的路由参数id值为', id);
+
+ // 拼接请求URL
+ // 发起请求,成功时并打印请求结果,失败时打印失败结果
}
}
```
我们在正式编辑前用注释的方式给出了编程的思路,这是个非常好且应该保持习惯。有些事情,不要因为感觉简单就不想做。我们之所以写**优秀、易读**的代码,是为使以后的变更、阅读更轻松。对于我们而言,只有**变化**是永远不变的。我们应该以敞开的心态去迎接变化,而不是报怨,因为报怨解决不了任何问题,它的唯一作用便是使原本愉悦的心情变糟糕。
根据注释添加代码后,最后的代码如下:
```typescript
+++ b/first-app/src/app/edit/edit.component.ts
@@ -1,5 +1,6 @@
import {Component, OnInit} from '@angular/core';
import {ActivatedRoute} from '@angular/router';
+import {HttpClient} from '@angular/common/http';
@Component({
selector: 'app-edit',
@@ -8,12 +9,22 @@ import {ActivatedRoute} from '@angular/router';
})
export class EditComponent implements OnInit {
- constructor(private activeRoute: ActivatedRoute) {
+ constructor(private activeRoute: ActivatedRoute,
+ private httpClient: HttpClient) {
}
ngOnInit(): void {
const id = this.activeRoute.snapshot.params.id;
- console.log('获取到的路由参数id值为', id);
+
+ // 拼接请求URL
+ const url = 'http://angular.api.codedemo.club:81/teacher/' + id;
+ // 发起请求,成功时并打印请求结果,失败时打印失败结果
+ this.httpClient.get(url)
+ .subscribe((data) => {
+ console.log('成功', data);
+ }, (error) => {
+ console.log('失败', error);
+ });
}
}
```
当回调函数中仅有一个参数时,我们可以省略包含参数的`()`,所以上述请求代码还可以简化为:
```typescript
this.httpClient.get(url)
- .subscribe((data) => {
+ .subscribe(data => {
console.log('成功', data);
- }, (error) => {
+ }, error => {
console.log('失败', error);
});
}
```
同时,当回调函数方法体中的代码仅有一行时,还可以省略包含方法体的`{}`,同时删除那仅有一行的代码的结束符`;`,则上述代码还可以简化为:
```typescript
this.httpClient.get(url)
- .subscribe(data => {
- console.log('成功', data);
- }, error => {
- console.log('失败', error);
- });
+ .subscribe(data =>
+ console.log('成功', data)
+ , error =>
+ console.log('失败', error)
+ );
}
```
如果这一行代码不长,我们还可以将其写到一行当中:
```typescript
this.httpClient.get(url)
- .subscribe(data =>
- console.log('成功', data)
- , error =>
- console.log('失败', error)
+ .subscribe(data => console.log('成功', data),
+ error => console.log('失败', error)
);
}
```
当然了,掌握了这个原则上,你可以在以提升代码易读性为目的前提下,按自己的喜好随意改写。
![image-20210227094238814](https://img.kancloud.cn/7b/1e/7b1ec97b8f53ae4b175a45d8c863cc3d_1926x682.png)
## 插值与模板表达示
在控制台中查看数值是个不错的习惯,但有时候不够直观。接下来,我们将后台请求回的数据直接显示在V层,以达到快速便捷查看的目的。组件中的`public`变量通行为V层与C层之间,若要V层中显示,则可以可以在C层中定义`public`类型的变量即可:
```typescript
+++ b/first-app/src/app/edit/edit.component.ts
@@ -8,7 +8,7 @@ import {HttpClient} from '@angular/common/http';
styleUrls: ['./edit.component.css']
})
export class EditComponent implements OnInit {
-
+ 👉 public teacher: any;
constructor(private activeRoute: ActivatedRoute,
private httpClient: HttpClient) {
}
```
在typescript中,声明`public`类型的属性还可以省略该关键字,所以我们在声明`public`属性时,更愿意省略`public`关键字:
```typescript
- public teacher: any;
+ teacher: any;
```
> 在这里我们将`teacher`类型声明为`any`,表示其可以是任意类型。后期我们将逐步修正此写法。在生产项目中,我们有时候会临时使用`any`来声明一些暂时未知的类型。
然后将请求成功获取的数据放到`teacher`属性中:
```typescript
+++ b/first-app/src/app/edit/edit.component.ts
@@ -20,7 +20,7 @@ export class EditComponent implements OnInit {
const url = 'http://angular.api.codedemo.club:81/teacher/' + id;
// 发起请求,成功时并打印请求结果,失败时打印失败结果
this.httpClient.get(url)
- .subscribe(data => console.log('成功', data),
+ .subscribe(data => this.teacher = data,
error => console.log('失败', error)
);
}
```
并使用**插值{{}}**与**模板表达式**将其显示在V层:
```typescript
+++ b/first-app/src/app/edit/edit.component.html
@@ -1,3 +1,4 @@
+{{teacher | json}}
<div>
姓名:<input value="张三">
</div>
```
`{{}}`被称为插值表达式,`|`则是模板表达式中的一个。`|`又被称为管道(pipe)符,这里的`json`则是Angular内置的管道之一,起的作用是将JSON对象转换为JSON字符串。通常被我们用于在V层中快速查看JSON对象的值:
![image-20210227100133772](https://img.kancloud.cn/e0/0f/e00f461b89970e5036d4d4ba0e3f94bc_1480x204.png)
## 本节作业
请尝试使用`[(ngModel)]`其绑定到`src/app/edit/edit.component.html`的`input`标签上。
![image-20210227100611175](https://img.kancloud.cn/7f/29/7f293b24ccf2ae41e999b7a7228d0869_1330x462.png)
你可能需要如下代码:
```typescript
// 发起请求,成功时并打印请求结果,失败时打印失败结果
- this.httpClient.get(url)
+ this.httpClient.get<any>(url)
.subscribe(data => this.teacher = data,
error => console.log('失败', error)
);
```
其它的知识点请参考已学习的章节。请完成该作业后继续学习。
| 名称 | 地址 | 备注 |
| ---------------- | ------------------------------------------------------------ | ---- |
| 插值与模板表达式 | [https://angular.cn/guide/interpolation#template-expressions](https://angular.cn/guide/interpolation#template-expressions) | |
| JSON管道 | [https://angular.cn/api/common/JsonPipe](https://angular.cn/api/common/JsonPipe) | |
| 本节源码 | [https://github.com/mengyunzhi/angular11-guild/archive/step2.4.3.zip](https://github.com/mengyunzhi/angular11-guild/archive/step2.4.3.zip) | |
- 序言
- 第一章 Hello World
- 1.1 环境安装
- 1.2 Hello Angular
- 1.3 Hello World!
- 第二章 教师管理
- 2.1 教师列表
- 2.1.1 初始化原型
- 2.1.2 组件生命周期之初始化
- 2.1.3 ngFor
- 2.1.4 ngIf、ngTemplate
- 2.1.5 引用 Bootstrap
- 2.2 请求后台数据
- 2.2.1 HttpClient
- 2.2.2 请求数据
- 2.2.3 模块与依赖注入
- 2.2.4 异步与回调函数
- 2.2.5 集成测试
- 2.2.6 本章小节
- 2.3 新增教师
- 2.3.1 组件初始化
- 2.3.2 [(ngModel)]
- 2.3.3 对接后台
- 2.3.4 路由
- 2.4 编辑教师
- 2.4.1 组件初始化
- 2.4.2 获取路由参数
- 2.4.3 插值与模板表达式
- 2.4.4 初识泛型
- 2.4.5 更新教师
- 2.4.6 测试中的路由
- 2.5 删除教师
- 2.6 收尾工作
- 2.6.1 RouterLink
- 2.6.2 fontawesome图标库
- 2.6.3 firefox
- 2.7 总结
- 第三章 用户登录
- 3.1 初识单元测试
- 3.2 http概述
- 3.3 Basic access authentication
- 3.4 着陆组件
- 3.5 @Output
- 3.6 TypeScript 类
- 3.7 浏览器缓存
- 3.8 总结
- 第四章 个人中心
- 4.1 原型
- 4.2 管道
- 4.3 对接后台
- 4.4 x-auth-token认证
- 4.5 拦截器
- 4.6 小结
- 第五章 系统菜单
- 5.1 延迟及测试
- 5.2 手动创建组件
- 5.3 隐藏测试信息
- 5.4 规划路由
- 5.5 定义菜单
- 5.6 注销
- 5.7 小结
- 第六章 班级管理
- 6.1 新增班级
- 6.1.1 组件初始化
- 6.1.2 MockApi 新建班级
- 6.1.3 ApiInterceptor
- 6.1.4 数据验证
- 6.1.5 教师选择列表
- 6.1.6 MockApi 教师列表
- 6.1.7 代码重构
- 6.1.8 小结
- 6.2 教师列表组件
- 6.2.1 初始化
- 6.2.2 响应式表单
- 6.2.3 getTestScheduler()
- 6.2.4 应用组件
- 6.2.5 小结
- 6.3 班级列表
- 6.3.1 原型设计
- 6.3.2 初始化分页
- 6.3.3 MockApi
- 6.3.4 静态分页
- 6.3.5 动态分页
- 6.3.6 @Input()
- 6.4 编辑班级
- 6.4.1 测试模块
- 6.4.2 响应式表单验证
- 6.4.3 @Input()
- 6.4.4 FormGroup
- 6.4.5 自定义FormControl
- 6.4.6 代码重构
- 6.4.7 小结
- 6.5 删除班级
- 6.6 集成测试
- 6.6.1 惰性加载
- 6.6.2 API拦截器
- 6.6.3 路由与跳转
- 6.6.4 ngStyle
- 6.7 初识Service
- 6.7.1 catchError
- 6.7.2 单例服务
- 6.7.3 单元测试
- 6.8 小结
- 第七章 学生管理
- 7.1 班级列表组件
- 7.2 新增学生
- 7.2.1 exports
- 7.2.2 自定义验证器
- 7.2.3 异步验证器
- 7.2.4 再识DI
- 7.2.5 属性型指令
- 7.2.6 完成功能
- 7.2.7 小结
- 7.3 单元测试进阶
- 7.4 学生列表
- 7.4.1 JSON对象与对象
- 7.4.2 单元测试
- 7.4.3 分页模块
- 7.4.4 子组件测试
- 7.4.5 重构分页
- 7.5 删除学生
- 7.5.1 第三方dialog
- 7.5.2 批量删除
- 7.5.3 面向对象
- 7.6 集成测试
- 7.7 编辑学生
- 7.7.1 初始化
- 7.7.2 自定义provider
- 7.7.3 更新学生
- 7.7.4 集成测试
- 7.7.5 可订阅的路由参数
- 7.7.6 小结
- 7.8 总结
- 第八章 其它
- 8.1 打包构建
- 8.2 发布部署
- 第九章 总结