常见问题-angular 各种undefined、null、后台刷新数据前台html此数据不刷新

接口能正常获取到数据，但是前台一直显示暂无数据

1、如果使用分页，检查下分页里的total数量是否正确
2、如果使用分页，检查获取的数据是否是第一页的数据，分页页码是否正确

后台变量值已改变，前台html此变量值不刷新

import { ChangeDetectorRef } from ‘@angular/core’;
constructor(
private cd: ChangeDetectorRef,
) {
super()
}
if (res.length == 0) {
this.hasdata = false
this.cd.markForCheck() // 如果前台this.hasdata不更新，需要加上这句话
return
}

一定要仔细，看看json数据中是否有这个值，值否是为null

第一种undefined，因为马虎

父组件输入栏目code，可以在父组件显示栏目中文名称和对应栏目下的数据，中文名称数组undefined

原因：数据中没有这个字段

@Input('categories') columnIds = []
newName = []

render(){
	for (let i = 0; i < this.columnIds.length; i++) {
		//从父组件传过来data下面的栏目名称的data的第一条数据的栏目名称
	      const name = this.data[this.columnIds[i]].data[0].columnname
	      this.newName.push(name)
	      console.log('this.newName',this.newName)
	    }
}

打印出来的数据显示newName是undefined

出现问题的原因

是我把这句话写错了，应该是data[0]下面的columnname，一定要仔细
const name = this.data[this.columnIds[i]].data[0].columnname

第二种undefined

子组件异步获取的数据在ts文件中未获取完，页面上的html已经加载提示data undefined，需要控制子组件异步数据获取完毕父组件再加载

注意：这里的报错是html文件报错
1、最简单的解决方法：
给data赋初始值，有初始值就不会报undefined错误

data:Array<any> = []

2、加一个*ngIf判断就可以，当data为真时加载组件

<news-list *ngIf="data" class="style2" [showNew]="true" [categories]="['GZZD','CZGC']" [mock]="false" [data]="(data)"></news-list>

第三种undefined

*ngFor数据循环的时候，组件中异步获取的数据未加载完，html中的文件就开始加载，提示data undefined

1、最简单的解决方法：
给data赋初始值，有初始值就不会报undefined错误

data:Array<any> = []

2、html加载组件前使用ngif判断data是否有值

<ul class="list" *ngIf="data">
    <li *ngFor="let content of data; let i = index"
      class="d-flex justify-content-between align-items-center">
         {{content.name}}
    </li>
</ul>

第四种 undefined

从接口获取的data数据是不应该变化的，当切换tab的时候，将对应栏目下的data赋值给list，html展示数据的时候循环list中的数据，而不应该this.data = this.data

data
list
handleclick(column, i) {
    this.activeColumnIndex = i
    this.activeColumn = column
    //this.data = this.data[this.activeColumn].data，这种写法不可取 
    this.list = this.data[this.activeColumn].data 
  }
  /**
     * 刚开始时写成this.data = this.data[this.activeColumn].data
     * 提示this.data是undefined
     * 
     * 原因分析：
     * tab切换时data应该是包含两个栏目的data，比如data['JTXW], data['GSYW']
     * this.data = this.data把data值覆盖了
     * 所以使用另一个变量list来接收不同栏目的data
     */

第五种 cannot read property ‘length’ of null

主要原因：
获取的数据有字段值为null，当在html中展示值为null的字段的length时就会报错

html代码

<ul class="news-list-ul newsVideo-ul" *ngIf="columnId === 'NSBDDJT'">      
   <li  *ngFor="let content of contents; let i = index" class="newsVideo">
      <div class="li-newsVideo">
        <div class="time">{{content?.creationtime | date:'yyyy-MM-dd'}}</div>
        <div class="abstract">
            {{content.abstract.length>100?(content.abstract.substring(0,100)+'...'):content.abstract}}
        </div>
       </div>    
 </li>
</ul>

报错如下

艰辛历程：
错误的认为报length错误是因为数据没有获取的到或者是因为数据未加载完页面就开始加载，
实际上是因为获取的数据中abstract字段有空值是读取不到length的

1、使用debugger，数据获取能正常获取到
2、删除循环的数据就不报错
3、报length错误，没有仔细检查html中有length属性

解决方式：
添加 ngIf判断，当content.abstract有值时才显示

<div class="abstract" *ngIf="content.abstract">
     {{content.abstract.length>100?(content.abstract.substring(0,100)+'...'):content.abstract}}
</div>

控制台打印出的变量有的是undefined有的是确定的值

原因：在html中存在多次调用这个子组件，html中一些参数没有设置或者设置的不对就会出现此现象，有一个变量能正常打印出来说明子组件编码是正确的

for循环中使用解构赋值提示undefined

 for(let i=0;i<this.dayData.length;i++){
      this.dayData[i] = this.dayData[i].split(',',5)
      this.dayData[i].shift()
      //可以正常打印出来每条数据，如下图显示
      console.log('this.dayData[i]',this.dayData[i])
      //不加这句话提示解构赋值中undefined，加上就正常
      //但是上面已经打印出来结果了，不知道为啥undefined
      this.dayData[i] = this.dayData[i]
      //解构赋值，调换数组中的字符串位置
      [this.dayData[i][0],this.dayData[i][1],this.dayData[i][2],this.dayData[i][3]] = [this.dayData[i][0],this.dayData[i][3],this.dayData[i][2],this.dayData[i][1]]   
    }