angular2 踩坑之旅

最新推荐文章于 2023-05-10 16:10:26 发布

alisaGreen

最新推荐文章于 2023-05-10 16:10:26 发布

阅读量5.1k

点赞数

本文链接：https://blog.csdn.net/bluefish_flying/article/details/73609993

版权

1、Can't bind to 'ngForOf' since it isn't a known property of 'tr'

<tr *ngFor="let mdata of mdatlist">
<td>{{mdata.zbname}}</td>
<td>{{mdata.validstate}}</td>
<td>{{mdata.dotime}}</td>
<td>{{mdata.prevdotime}}</td>
<td>{{mdata.prevresult}}</td>
<td>{{mdata.nexdotime}}</td>
<td>{{mdata.nextresult}}</td>
<td><a href="#">详情</a>
<a href="#">删除</a></td>
</tr>

Solution:

You should import the BrowserModule in your app module

and

importCommonModule in children modules.You should only import BrowserModule once.

Other modules should be importing CommonModules instead.

摘自http://www.cnblogs.com/happen-/p/6382614.html

问题描述：

在设置过base属性之后路由依旧不能使用，提醒如下图

解决方法：

在根级Compent的template内部添加如下代码：

<router-outlet></router-outlet>

3、

在自定义表单控件组件中 `[formGroup]="group"` 是必须的么？

form-input.component.ts

<div [formGroup]="group">
  <label>{{ config.label }}</label>
  <input
     type="text"
     [attr.placeholder]="config.placeholder"
     [formControlName]="config.name" />
</div>

如果去掉 <div> 元素上的 [formGroup]="group" 属性，重新编译后浏览器控制台将会抛出以下异常：

在 formControlName 指令中，初始化控件的时候，会验证父级指令的类型：

private _checkParentType(): void {
    if (!(this._parent instanceof FormGroupName) &&
        this._parent instanceof AbstractFormGroupDirective) {
      ReactiveErrors.ngModelGroupException();
    } else if (
        !(this._parent instanceof FormGroupName) && 
        !(this._parent instanceof FormGroupDirective) &&
        !(this._parent instanceof FormArrayName)) {
      ReactiveErrors.controlParentException();
    }
  }

那为什么要验证，是因为要把新增的控件添加到对应 formDirective 对象中：

private _setUpControl() {
    this._checkParentType();
    this._control = this.formDirective.addControl(this);
    if (this.control.disabled && this.valueAccessor !.setDisabledState) {
      this.valueAccessor !.setDisabledState !(true);
    }
    this._added = true;
}

摘自https://segmentfault.com/a/1190000009186703#articleHeader7

4、angular2 Cannot read property 'valid' of undefined

在模块化表单中对字段进行有效性和未更新验证的时候出现这个错误

解决方法：在容器中一定要加#xx =ngModel

eg:

<td class="form-group">
<select [(ngModel)]="adddata.validstate" #validstate="ngModel" required name="validstate">
<option *ngFor="let state of zbstates">{{state}}</option>
</select>
<div [hidden]='validstate.valid || validstate.pristine' class='alert alert-danger'>
指标状态
</div>
</td>

</form> //这里formdata在ngForm的监控红监听表单数据中的状态和数值等

5、ngModel取值问题

在angular中ngModel是引用绑定，而不是值绑定，那就意味着如果ngModel对应的引用对象没有变，但是引用对象的值发生了改变的话，Angular是检测不到变化的，因此不会做双向更新。

eg:

<inputtype="date" name="testDate" ngModel="testDate.value" placeholder="yyyy-MM-dd"/>

如果写成

<inputtype="date" name="testDate" ngModel="test" placeholder="yyyy-MM-dd"/>

在这里你即使通过插件改变了testDate的值，input的值也改变了，但是在后台你是获取不到ngModel里面的值的

angular中指令被用的最多的除了ng-repeat之外就非他莫属了吧，由于各种业务的需求，我们经常需要去写一些继承ngModel的指令，来满足各种奇葩需求，最多的莫过于表单的验证啦，另外你在封装一些jquery插件的时候，也是需要继承ngModel的，最典型的莫过于 datepicker、fileUpload等等。

　　但是ngModel本身其实有很多坑，在这里分享给大家，如果大家又遇到其他问题，欢迎补充：

　　首先我们要知道一些概念的东西，这里我就不占篇幅了，不了解的可以先去看看这篇文章：

　　　　http://www.cnblogs.com/liulangmao/p/4110137.html　　

　　在这里，我基本分为两种问题，一种是viewValue和modelValue不同的问题，另一种是管道问题

　　　　第一种：viewValue和modelValue不同的问题

　　　　　　1.viewValue想变成modelValue

　　　　　　2.modelValue想变成ViewValue　　　　　　　　

　　　　　　3.moduleValue想和viewModel不一样

　　　　　　4.viewModel和DOM元素的值不一样

　　　　　　要想解决这些问题，我们先来了解一些$apply的一个问题，那就是执行$apply之后数据是以什么为主的

　　　　　　①viewValue -> modelValue

　　　　　　②modelValue -> viewValue,于是我们写了下面这个指令　　　　　　

 <input type="text" ng-model="vm.modelTest" model-test>

.directive('modelTest',function(){
        return {
            require : 'ngModel',
            link : function(scope,iElm,iAttrs,ngModelCtrl){
                iElm.on('mouseenter',function(){
                    console.info("打印出更改之后，没有执行$apply的值")
                    console.log(ngModelCtrl);
                    
                    //更改modelValue的值
                    ngModelCtrl.$modelValue = "test change";
                    
                    console.info("打印出更改之后，没有执行$apply的值")
                    console.log(ngModelCtrl);
                    
                    //执行$apply
                    scope.$apply();
                    
                    console.info("打印出更改之后，执行$apply的值")
                    console.log(ngModelCtrl);
                })                  
            }
        }
    })

　　　　从上面的指令，我们不难得出一个比较武断的结论 $apply会根据viewValue的值而改变modelValue的值，也就是modelValue -> viewValue，那么，我们可以开始解决我们的问题了。　　　　

　　　　　　1.viewValue想变成modelValue

　　　　　　　　这种情况很少，但是如果你在jq的操作就可能发生这种需求，一般依然还是$apply让model的值重新更新，使用了$apply就会触发$render()函数，因为modelValue的变化，会导致$render触发

　　　　　　2.modelValue想变成ViewValue　(看了上面的实验，我想你应该懂了，直接使用$apply)　　　　　　　

　　　　　　3.moduleValue想和viewModel不一样

　　　　　　　　一般情况都会使用管道去解决，但是有个其他思路可以提供给大家,下面这段代码是在国外看到的，觉得挺不错的，效果大家可以去尝试下，将model的值变成数组。

ngModelCtrl.$viewChangeListeners.push(function(){
                                 $parse(iAttrs.ngModel).assign(scope, ngModelCtrl.$viewValue.split(',')); 
                            });

　　　　第二种：管道问题

　　　　　　管道是什么呢，在ngModel里面其实就是view视图和model视图数据交互的时候需要经过的数组或对象，这个数组或对象由方法组成，每次经过都会执行数组里面的方法，并返回结果。一共有四种管道

　　　　　　$formatters ：它是model视图转向view视图的管道（数组），model的值会经过他才转变成view视图的值，另外它的调用顺序是最特别的，从后往前调用，，越在数组后面，越早调用。

　　　　　　$parsers : 它正好是跟$formatters相反，是view视图转向model视图的管道（数组），view的值会经过他才转变成model视图的值，在1.2.x（兼容IE8）之前一般我们会在这里实现或扩展验证功能

　　　　　　$validators：这是在1.3.x之后出现的管道（json对象），来帮助我们实现和扩展验证功能的，当我们进入$parsers的同时，同时也会进入$validators，在这里我贴段源码（验证required）给大家看看，我想大家应该能理解这个管道的功能

ctrl.$validators.required = function(modelValue, viewValue) {
        return !attr.required || !ctrl.$isEmpty(viewValue);
      };

　　　　　　$asyncValidators :功能与$validators相似，不同的是他可以实现异步验证，你可以在管道内部执行异步处理，会在结果返回之后，才去设置验证结果，这是个大课题，我看到有人讨论过，我也就不详细讲了http://www.cnblogs.com/liulangmao/p/4118868.html可以进去这个博客看看。

　　　　　　好了，ngModel的一些东西基本已将讲完了，另外还有一些就不仔细去说了，我的博客里面还有一篇关于$render的详解，有兴趣的可以了解下。

摘自http://www.cnblogs.com/HeJason/p/5486975.html 虽然我看的时候没有解决我的问题，但是怎么说呢，感觉总结的很好，让我对ngModel有了更深的认识

6.报错

ERROR in Missing binding H:\myWork\lvlvPro\lvlvPro\node_modules\node-sass\vendor\win32-ia32-48\binding.node
Node Sass could not find a binding for your current environment: Windows 32-bit with Node.js 6.x

Found bindings for the following environments:
- Windows 64-bit with node.js 6.x

This usually happens because your environment has changed since running `npm install`.
Run `npm rebuild node-sass` to build the binding for your current environment.

Found bindings for the following environments:
- Windows 64-bit with node.js 6.x

This usually happens because your environment has changed since running `npm install`.
Run `npm rebuild node-sass` to build the binding for your current environment.

Found bindings for the following environments:
- Windows 64-bit with node.js 6.x

解决方案
由于之前换电脑，刚开始是32位的可以直接运行来着，后面电脑变成64位的就报这个错了

npm rebuild node-sass

node install H:\myWork\lvlvPro\lvlvPro\node_modules\node-sass 将node_modules里面的node-sass重新安装

npm rebuild node-sass

npm start

然后就可以了

参考解决方案：http://blog.csdn.net/u010116861/article/details/51886550

7 报错

The "@angular/compiler-cli" package was not properly installed. Error: Error: Cannot find module '@angular/compiler-cli'

解决方法，一般是运行路径又问题没有找到真正的项目包，可能在上一层要cd 项目名再重新运行一次

PS E:\Program Files\express\myapp\mainappPage> ng serve

PS E:\Program Files\express\myapp\mainappPage\my-app> ng serve

8、Can't bind to 'ngModel' since it isn't a known property of 'ngModel'？

解决方法：在这个模块的module.ts中加入formModel

9 问题

 Cannot assign to a reference or variable

解决方法：

#name = "ngModel" 和[(ngModel)]="name" 好像是这两个一模一样了   网上说是#name 和ts里面的属性一样了，没弄出来

html input 的名称 #name 与ts中class的属性名称相同，会出现该错

alisaGreen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

angular2 踩坑之旅

在自定义表单控件组件中 [formGroup]="group" 是必须的么？

在自定义表单控件组件中 `[formGroup]="group"` 是必须的么？