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" id="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()