学习 - 总结 - 分享 - Francis

前言因为项目中需要用到CheckBox向后台提交数据 最开始设定的是学生选择什么就直接把答案合成一个字符串传到后端 但是需要回显学生答案，后端返回的json数据中答案是一个处理后的字符串，无法进行判断 所以采用数组形式答案，可以在HTML中利用模板表达式进行循环遍历判断，从而实现答案回显的功能 方式一 _ 答案合成字符串html code<div> <p>{{question.questi

引言由于项目中需要用到试卷，而试卷会涉及到很多不同输入表单，所以处理起来比较复杂； 再加上一些特殊的功能和用户体验度的问题，所以需要对试卷进行设计，以处理不同场景 功能要求1.显示数据：把后端返回的不同题型的数据按照相应要求显示出来； 2.返回数据：将用户输入的数据实时返回给后端； 3..数据回显：将用户的之前填入的数据回显到相应题目； 4.信息显示：包括用户信息，时间信息（同时加入网络状态

引言在【Angular2】试卷整体设计中说到AnswerSheet组件的卡功能是可以显示用户对每道题答题状态，点击答题卡可以定位到相应题目； 同时，这里也有一些组件交互的问题需要讨论 功能要求1.显示用户对每道题答题状态； 2.点击答题卡可以定位到相应题目； 代码说明html code<div id="answer_sheet"> <div class="sidebar_title">答题卡<

问题在jenkins构建中出现这个问题，但是本地运行正常You seem to not be depending on “@angular/core”. This is an error解决把node_modules删除，再重新安装rimraf node_modulescnpm install 参考： https://stackoverflow.com/questions/41534459/

引言在【Angular2】试卷整体设计中说到ExamPaper组件成为容器，接收后端数据，根据数据的不同挑选不同题型组件来渲染数据，同时它也可以接受各个题型组件返回的数据 功能要求1.作为各个题型组件的容器，传递消息； 2.接收数据，并根据数据的不同选择不同的组件渲染数据； 代码说明html code<div class="question_type" *ngFor="let qt of exam

引言项目中要用到生成一系列的条形码，并在网页中打印 前端用的是Angular2，在实现的过程中查找了许多资料，以下是相关总结 步骤1.下载JsBarcode.all.js下载地址：http://download.youkuaiyun.com/download/francis123580/101302702.把JsBarcode引入到项目首先把js放在assets文件夹下； 然后在index.html中引入；

引言项目中需要对用户的操作记录备份起来，如果后端出现任何问题，可以从前端把用户操作记录提取出来，然后后期把数据导入到数据库 功能网络监测 1.监测每条记录的提交情况，分辨出是客户端和服务器问题； 2.呼吸灯动态显示当前整体提交状况； 3.监控中心可以查看每条记录的提交情况； 4.监控中心可以控制对每条记录的监控状态； 5.监控中心可以切换网络监测的开闭模式；智能提交 1.监控中心

前言因为项目中需要用户输入一些内容，比如一段话什么的，这时候需要把用户的格式记录下来，再次显示的时候可以显示原来的排版开始想就是引用第三方的组件，比如primeNG的https://www.primefaces.org/primeng/#/，但是折腾了一晚上总是引入失败，然后分析了一下，这次需求里面的格式无非就是 空格 和 回车，其它的样式也不需要，直接采用默认就好那么，就自己做一个简易版本的吧，造

背景数据库存的内容是有一段有格式的HTML文本，需要把这段文本显示在界面上 这时候，可以使用pipe和innerHTML实现这个功能代码pipe fileimport { Pipe, PipeTransform } from '@angular/core';import { DomSanitizer } from '@angular/platform-browser';@Pipe({ name:

前言需要根据实体生成一个数组，存放初始数据实体是ExamPaperModel（试卷），其中一个属性为QuestionTypeList，包含的是实体QuestionTypeModel（题型），题型实体中有一个属性为QuestionMainList，包含的是实体QuestionMainModel（题干）现在整个试卷实体是从后台返回，然后传递到该组件，该组件要在页面渲染前生成数组存放初始的题干答题状态

背景需要显示用户信息，用到了插值表达式和双向绑定 开始数据显示正常，但是浏览器一直报错，不知为何因为可以正常运行，所以就继续做 但是用到后台返回值来切换编辑状态的时候，什么都不显示 所以就得解决了这个问题问题ERROR Error: Uncaught (in promise): TypeError: Cannot read property ‘id’ of undefinedTypeError

背景需要在项目中建立自己的component 定位到具体的目录下；输入ng g component my-indivi dual-information 就会显示如下问题，无法创建component问题在控制台提示如下问题：You have to be inside an angular-cli project in order to use the generate command解决

背景由于负责项目中Angular2的端对端测试和单元测试，所以需要掌握一定Angular的知识同时还需要学习Typescript，Karma，Jasmine，Protractor一些相关知识现在需要一些简单的项目来熟悉Angular2的运转，官方的Tour of Hero就是一个不错的上手项目 功能说明该系统的功能简单来说就是：列表显示英雄，点击查看并可以修改英雄的信息 知识点1.module和co

简单理解一下Angular组件 组件负责控制屏幕上的一小块区域，我们称之为视图。 —— Angular官方定义简单来说就是一段可复用html代码，我们插值表达式ngIf & ngFor & ngSwitch

前言在Angular开发中，我们经常会涉及到组件之间的交互，比如会引用自己部门开发的组件 有时候，我们需要向引用的组件里面绑定一些数据，或者我们需要引用的子组件输出一些数据 这时，我们就需要处理好组件之间的交互   组件交互的关键代码父组件绑定数据到子组件子组件 <h3>{{hero.name}} says:</h3> @Input() hero: Hero;父组件<hero-child

问题父组件通过服务调取后台接口获取数据 子组件@Input变量是父组件获取数据中的一个数据 由于子组件在渲染的时候，父组件的数据还没有获取到，所以会出现问题 方法1使用setTimeout函数setTimeout(() => { this.diff = this.examTimeLength * 60; }, 300);这种方法实现了功能，但是不太可取，因为后台返回的数据可能会更慢，300ms内

前言在Angular2开发的过程中遇到一些问题，现记录一下，避免重复同样的错误 ngOnChanges截听输入属性值的变化问题在组件交互中，使用了ngOnchanges来监听传输到组件数据的微小变化 官网中使用的是两个变量，他们的变化可以很好监听出来，而我传输的是一个实体，每次改变的是实体里面的属性值 但是第一次能监听到，后来就不行，换一个可以监听，在换回之前又可以监听了，在点击就又不可以了

前言这是一个很小的问题，但是刚遇到的时候也是各种懵因为，逻辑挺复杂，组件传递到父组件到父组件，用到的实体是多层嵌套，测试json是500多行所以，为了便于理解，在各个地方加了一些注释，所以报错了….因为逻辑，实体都复杂，不知道是哪错了其实，就是因为注释问题1.Unexpected token / in JSON at position 35 2.Uncaught (i

引言Information组件是页面中侧边栏，用于显示一些相关信息，包括用户信息，时间信息，同时加入网络状态静默监测 功能要求1.显示用户信息； 2.显示时间； 3.显示网络状态； 4.提供交卷功能； 代码说明html code<div id="sidebar_info"> <div class="sidebar_title">信息详情</div> <img src="../../..