survivorsfyh的博客

An unhandled exception occurred: listen EADDRNOTAVAIL: address not available

通过 axios 方式下载文件

Angular 项目配置代理与跨域异常所可能导致的请求异常 404

迁移 angular 项目至新工程中在尝试 build 的时候抛出了 Module build failed angular 一系列的异常提示;经过一番排查后发现因组件集成的Ant Design of Angular而该组件的样式需要在项目根路径下的 css 或者 less 等文件中引入其样式库头文件@import "~ng-zorro-antd/ng-zorro-antd.min.css";@import "../node_modules/ng-zorro-antd/ng-zorro-a..

Angular 项目迁移后第一次 build 打包后抛出了如下的异常提示:bundle initial exceeded maximum budget. Budget 1.00 MB was not met by 642.91 kB with a total of 1.63 MB.大致意思是 build 的文件大小已超出了初始设定的范围;解决办法在项目工程中的 angular.json 中修改内存的参数设定值即可,具体 code 如下:"budgets": [ .

首先,在项目工程的根目录下创建 proxy-config.json 文件并初始化其配置相关,具体 code 如下:{ "/api_test": { "target": "https://xxxxxx/chuke-api", "secure": false, "logLevel": "debug", "changeOrigin": true }, "/api": { "target": "https://xxxxxxxxxxxxxx", "se

首先,在现有旧项目剥离的时候创建的新的项目,新项目应用的 angular13 版本,其中集成 resize-observer-polyfill 类库的时候抛出了如下异常:TS2717:Property contentRect must be of type DOMRectReadOnly "dependencies": { "@angular/animations": "~13.0.0", "@angular/common": "~13.0.0", "@angular/

Your global Angular CLI version (13.0.1) is greater than your local version (11.0.2). The local Angular CLI version is used.To disable this warning use "ng config -g cli.warnings.versionMismatch false".An unhandled exception occurred: Schematic "rotation

More than one module matches. Use the skip-import option to skip importing the component into the closest module or use the module option to specify a module.创建新组建的时候执行 ng g c sync 抛出了如上的异常提示,需要预先指定一个 module,既可以了解为指定项目中现有 module 或者先创建一个新的 module 之后再来创建组.

当 input 与表单 form 的相结合使用的时候,如果为 input 设置 [disabled]="false" 的属性时发现未能生效;日志中会抛出如下警告并提供一种方式;It looks like you're using the disabled attribute with a reactive form directive. If you set disabled to true when you set up this control in your component c

首先,集成Antd组件执行如下命令集成样式组件ng add ng-zorro-antd其次,集成成功后切记不要急于构建 UI,先要检查一下组件的样式是否已引入其中 ..注:调用使用前切记在项目根样式中引用添加样式css !!!@import "~ng-zorro-antd/src/ng-zorro-antd.css";最后,组件集成完毕样式也引入成功后再继续构建UI即可...没引入样式会发现样式一团糟以上便是此次分享的全部内容，希望能对大家有所帮助！...

日常开发中表单使用很常见，正巧刚使用完，此次对nz-table的表单页脚显示总数据条数和当前页进行配置小结；具体基础用法可以参考官方文档 nz-table集成，如下是对页脚总页数和条数配置的拓展：注：需要预先声明好当前页码和数据总条数的字段并从接口数据中赋值首先，在获取到页码和数据总条数的基础上配置页脚模板当前页码可以通过组件中的 [nzPageIndex]="pageIndex" 获取；数据总条数可以通过数据源数组的 length 获取；<ng-template #...

使用Layout 布局后，子组件DatePicker 日期选择框的样式未能与其他组件一样撑开，需要额外单独对其设置 style 即可，具体 code 如下：style="width: 100%;"<nz-col nzSpan="6"> <nz-form-item class="item"> <nz-form-label [nzSpan]="8">轮转结束时间</nz-form-label> <n...

大致场景如下：正常使用 angular 的 Service 时候怎么 set 都不能正常存储数据字段，经过几经测试后发现是 set 前 URL 获取参数的时候数据字段格式不兼容，fuck ！！！如下是实现的具体 code：import { Injectable } from '@angular/core';import { UserInfo } from '../data/userInfo';@Injectable({ providedIn: 'root'})export clas

集成nz-table并前端设置分页配置 nzPageIndex、nzPageSize 后，拉取接口数据后，接口数据拉取成功但表单数据未渲染加载出来；解决办法经过一番测试和扒文档发现若前端控制分页的情况下必须同时配置如下属性[nzFrontPagination]="false"完整配置如下，可供大家参考：<nz-table #rowSelectionTable nzShowSizeChanger [nzData...

此次对于数据列表的文件导入通过 nz-upload 来实现，官方 Upload 上传文档中很详细，具体需要配置的参数均可查阅到；<nz-upload [nzAction]="uploadingFile" [nzHeaders]="uploadingHeader" [nzShowUploadList]="false" nzName="uploadFile" (nzChange)="btnClickUpload.

日常开发中对 File 声明属性的时候抛出了如下异常：TS2322: Type 'null' is not assignable to type 'File'.解决办法方式一：// @ts-ignorefileToUpload: File = null;方式二：fileToUpload: File | null = null; // 个人推荐该方式通过如上两种方式皆可实现，但个人更偏向于方式二，TS 的语法规范性真的好强 。。。包括调用接口传参的时候，如果不..

使用 angular 中 HttpClient 的 delete 方法时发现官方提供的方法中没有直接传 body 的方式；经过尝试可以通过 options 的方式将 body 包在该对象其中后发起请求，具体 code 如下：import {HttpClient, HttpHeaders} from '@angular/common/http';deleteExaminationTask(caId: string, token: string, ids: any) { const opti

简而言之，言而简之，记录一下日常开发中遇到的问题；在创建初始化数组后向数组中 push 数据的时候抛出了如下异常：Argument of type '{}' is not assignable to parameter of type 'never'.ts 语法上的一些规范，规范强个人感觉还是很不错的，更加规规矩矩，初始化的时候完善一下定义类型就行了，具体 code 如下；// 问题的写法const dataSource = [];// 完善后的写法const dataSourc

在 html 模块调用 *ngFor 的时候抛出了如下异常信息：No directive is matched on attribute ngFor 原因是在 module 中未引入 BrowserAnimationsModule 模块；解决办法在对应组件的 module 中引入 BrowserAnimationsModule 模块即可；import { BrowserAnimationsModule } from '@angular/platform-browser/anim.

创建带有独立 module 的模块，该种方式可以更好的管理每个独立的模块，自定义的 module 即可以对外暴露也可以直接挂在主路由上实现懒加载的模式；ng g m login --routing新组件编辑一.login 组件相关login.module.tsimport {NgModule} from '@angular/core';import {CommonModule} from '@angular/common';import {LoginRoutingMod.

日常开发中经常会用到 form 控件做一些操作，其中会涉及到一些动态监听某些控件数值参数发生改变而产生的相关联动操作，可以通过 valueChanges 的方式获取某些控件并进行订阅监听的操作，例如下面例子中所示：对 form 表单中的 input 控件进行实时监听的操作；首先，将控件创建完毕并对齐设置 formControlName 的 key 值；<form (ngSubmit...

开发中经常会使用到 ul 和 li 标签搭配来进行样式布局，但是使用 li 标签时默认会显示一个小圆点和占位符，如何对其进行去除处理具体如下 code 所示：首先，去除 li 标签的小圆点.conten-list-style { list-style: none;}其次，去除 li 标签的占位符.conten-list-style { list-style: none...

调试表单提交的时候，首次提交正常，再次发起提交异常抛出了如下异常：ERROR TypeError: object null is not iterable (cannot read property Symbol(Symbol.iterator))异常分析首先，根据抛出异常信息上下文查找到对应的 ts 文件中，object null 和对应的代码块，发现代码块逻辑中 key...

反复切换启动项目后，此次再次启动项目提示端口号被占用的异常提示，如下图所示：解决办法：首先，通过终端(Terminal)查询到被占用的端口进程，输入如下命令：sudo lsof -i :4200// 此处4200为上面异常提示中所被占用的端口号其次，通过如上终端结果中所对应 PID 的值执行 kill 命令，将其进程杀掉即可，输入如下命令：sudo kill -...

初始 angular 小记,当默认创建新工程后,会发现项目默认工程层级结构中含有该类 app.module.ts/* 程序入口*/import { BrowserModule } from '@angular/platform-browser';import { NgModule } from '@angular/core';import { FormsModule } from...

首先，安装该IDE之前需要预先安装 node.js，若已经安装好的可以直接跳过此步骤；检测是否安装成功，可以从终端输入 node -v 和 npm -v 查看版本信息；若未显示当前版本而是显示 “undefined” 的字样则需要预先安装该 node.js;安装 node.js 链接地址：node.js其次，已安装 node.js 后便可以继续安装angular cli 脚手...

首先，需要初始化一个数组用来后续执行循环的操作export class YHChildComponent implements OnInit { @Input() userInfoZS = { name: '张三', content: 'xxxxxx' }; userInfoLS = { name: '李四', content: 'xxxxx...

控制台 console 也是很常用的一项基础项,简单调用尝试了一下所涵盖的功能；具体在如下代码中有一一列举,具体输出的内容可从日志中进行对应参考； console.log('一、基本信息打印: log, info, error, warn'); console.log(this.name, '- log'); console.info(this); co...

最近在学习 Angular 时,在写法中发现了一个关于 ngModel 写法的小差异,仅此简单小结以便加深印象ngModel&lt;input type="text" name="survivors" placeholder="name" ngModel=""&gt;为对象添加 property,其 key 值为 ngModel 组件设置的 name 属性值;注:若单独使用 ng...