angular9-10笔记问题摘要汇总，HttpClientModule失败，模板语法渲染，循环，条件判断，双向绑定select重置
问题汇总
1.Angular 9默认启用的Ivy在使用HttpClientModule时将导致编译失败
TL;DR
编辑./tsconfig.json，在angularCompilerOptions中添加"enableIvy": false，相关部分代码如下所示。
"angularCompilerOptions": {
"enableIvy": false
}
报错部分原文：
This likely means that the library (@angular/common/http) which declares HttpClientModule has not been processed correctly by ngcc,
参考网址：https://blog.csdn.net/hu_zhenghui/article/details/105085249
2.angular视图中显示数据（当渲染内容为html文本）
常规方式
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<h1>{{title}}</h1>
<h2>My favorite hero is: {{myHero}}</h2>
`
})
export class AppComponent {
title = 'Tour of Heroes';
myHero = 'Windstorm';
}
渲染的内容为html文本方式：（使用innerHtml）
<li class="M fl" [innerHTML]=sessionMon></li>
<li class="Tu fl" [innerHTML]=sessionTues></li>
<li class="W fl" [innerHTML]=sessionWed></li>
<li class="Th fl" [innerHTML]=sessionThurs></li>
<li class="F fl" [innerHTML]=sessionFri></li>
3.angular内的条件判断语句使用
<p *ngIf="myform.length == 0">no result</p>
4.条件循环语句渲染（附带索引值）
语法
*ngFor附带as申明索引值i
<div class="con" *ngFor="let ele of classnamelist; index as i">
<h2>schedule name: {{ele}}</h2>
<div *ngFor="let list of classlist; index as i">
<div class="con" *ngIf="list.coursename == ele">
<h2 class="title">{{list.className}}</h2>
<p class="desc">{{list.catalog_description}}</p>
<table>
<table class="table table-striped" border=1 cellspacing=0>
<thead>
<tr>
<th>Section</th>
<th>Component</th>
<th>Class Nbr</th>
<th>Days</th>
<th>Start Time</th>
<th>End Time</th>
<th>Location</th>
<!-- <th>Instructor</th> -->
<th>Status</th>
<th>Campus</th>
<th>operation</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{list.course_info[0].class_section}}</td>
<td>{{list.course_info[0].ssr_component}}</td>
<td>{{list.course_info[0].class_nbr}}</td>
<td>
<table class="daysTable">
<tbody>
<tr>
{{list.course_info[0].days}}
</tr>
</tbody>
</table>
</td>
<td>{{list.course_info[0].start_time}}</td>
<td>{{list.course_info[0].end_time}}</td>
<td>
{{list.course_info[0].facility_ID}}
</td>
<!-- <td>
{{list.course_info[0].instructors}}
</td> -->
<td>
{{list.course_info[0].enrl_stat}}
</td>
<td>
{{list.course_info[0].campus}}
</td>
<td>
<button (click)="deletedata(list.course_info[0].class_nbr,list.catalog_nbr)">delete</button>
</td>
</tr>
</tbody>
</table>
</table>
</div>
</div>
</div>
5.输入框中select的动态双向绑定（重置）
getchange为修改选中值的方法，给bindon-value赋值，为修改默认的选中值，同时适用于重置
<div class="btn-group">
<span class="tit">Component</span>
<select class="span3" name="Component" bindon-value="inputComponent"
(change)="getChange('inputComponent',$event.target.value)">
<option value="All">All</option>
<option value="LEC">Lecture</option>
<option value="TUT">Tutorial</option>
<option value="LAB">Laboratory</option>
</select>
</div>
inputComponent = 'All';
starttime = 'All';
inputSubject = 'All';
endtime = 'All';
// tslint:disable-next-line:typedef type为选择的对应select项进行区分
getChange(type: string, uid: string) {
console.log('=========');
console.log(uid);/*输出选中的值*/
if (type === 'inputComponent') {
this.inputComponent = uid;
} else if (type === 'inputSubject') {
this.inputSubject = uid;
} else if (type === 'starttime') {
this.starttime = uid;
} else if (type === 'endtime') {
this.endtime = uid;
} else if (type === 'catalog_nbr') {
this.catalog_nbr = uid;
}
}
5.使用http进行数据交互
网络上杂七杂八的都是单独拎出来的，我直接写在根目录的app.components.ts内，无需单独组件
app.module.ts文件(这一步和大多数参考文件一致，都是引入HttpClientModule)
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';
@NgModule({
imports: [
BrowserModule,
HttpClientModule,
AppRoutingModule,
],
declarations: [
AppComponent
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
根组件 app.component.ts
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';/*开头部分引入*/
在AppComponent中注入
export class AppComponent {
/* //注入 */
constructor(private http: HttpClient) { }
}
在方法内调用
this.http.get(api, {
//这里写传递的参数
}).subscribe((res: any) => {
//返回成功的时候，调用的内容
console.log(res);
}, (err) => {
//返回失败时候的处理
console.log(err);
});
其实里面直接使用
fetch调用接口也可以实现，但不知道为什么有时候报错.(当我注入：HttpClient后，这个执行是成功的)
fetch('接口',{
method:'POST',
headers:{
'content-type':'application/x-www-form-urlencoded'
},
body:'要传递的参数'//URLSearchParams()操作参数
})
fetch(url).then(response => response.json())//解析为可读数据
.then(data => console.log(data))//执行结果是 resolve就调用then方法
.catch(err => console.log("Oh, error", err))//执行结果是 reject就调用catch方法
6.关于输入框输入限定最大值
常规限定最大值：
max-length='限定的值'angular内使用
maxLength="10"进行限定
<input type="text" maxLength="10" class="schedulesname" placeholder="" value={{schedulesname}}
(change)="changeschedulesname($event.target.value)">
7.生命周期钩子
官网文档：https://angular.cn/guide/lifecycle-hooks#initializing-a-component-or-directive
ngAfterViewInit() 当 Angular 初始化完组件视图及其子视图或包含该指令的视图之后调用。
ngOnInit()在 Angular 第一次显示数据绑定和设置指令/组件的输入属性之后，初始化指令/组件。
注：生命周期钩子里面初始化渲染，是直接可以支持原生js书写去操作dom元素的。
接口初始化调用可以是ngOnInit()也可以是ngAfterViewInit()
- 上一篇 »Swift学习笔记，10--枚举
- 下一篇 »angular学习笔记，十一-表达式
