无法读取未定义 Angular Ionic 的“已检查”属性答案

【问题标题】：Cannot read property 'checked' of undefined Angular Ionic无法读取未定义 Angular Ionic 的“已检查”属性
【发布时间】：2018-08-16 22:41:09
【问题描述】：

我目前正在使用 Ionic 创建一个应用程序。我需要两个复选框来查看它们是否被选中，以便我可以决定稍后将信息推送到哪里。

所以我在文档中读到复选框框架有一个“checked”属性，它返回一个布尔值。我第一次尝试时，代码看起来像这样：

cc.html

<ion-item>
  <ion-label>Course Start Date</ion-label>
  <ion-checkbox [(ngModel)]="csd"></ion-checkbox>
</ion-item>

<ion-item>
  <ion-label>Course End Date</ion-label>
  <ion-checkbox [(ngModel)]="ced"></ion-checkbox>
</ion-item>
<button ion-button full (click)="AddNewCourse()">
    Add
</button>

cc.ts

csd:any;
ced:any;

AddNewCourse(){
 if(this.csd.checked && this.ced.checked){
    console.log('pushed here');
 }else if(!this.csd.checked && this.ced.checked){
   console.log('push there');
 }
}

但我最终得到了错误无法读取未定义的“已检查”属性。所以我想也许如果我初始化可以工作的值，那么在构造函数中：

this.csd = false;
this.ced = false;

仍然给了我同样的错误。因此，经过一番搜索后，我发现也许我应该使用[checked]。但事实证明[(ngModel)] 和[checked] 不能一起工作，这导致我回到零。

最后我想也许ngOnInit() 会成功。但不幸的是，同样的问题仍然存在。

我不确定我在这一点上做错了什么，我的眼睛变得模糊，所以我确定我在做一些愚蠢的事情并且让事情变得如此简单如此复杂。任何帮助将不胜感激。

【问题讨论】：

您可以使用 ngValue 属性来检查已检查或调用 ngChecked 中的函数并返回模型的真假，这样您可以同时使用已检查和模型
我正在发布代码按住
您使用的是哪个版本的 Angular？您提供的代码和描述看起来好像您使用的是 Angular 而不是 AngularJS。
@Narm 是的，我错了，确实有人编辑了该标签。我正在使用 Angular，用 Typescript 编写。
你看过这篇文章了吗？ stackoverflow.com/questions/42437889/…

标签： angular ionic-framework checkbox undefined

【解决方案1】：

csd 和 ced 仅被声明但从未初始化。如果您想在csd 和ced 变量中拥有一个选中的属性，请一起声明和初始化该属性。

csd: any = {checked: false}
ced: any = {checked: false}

【讨论】：

【解决方案2】：

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
Name: <input ng-model="name">
{{checkFn()}}
<input type="checkbox" ng-model="value" ng-checked="checkFn()">
</div>


<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.name = "John Doe";
    $scope.value =true;
    $scope.checkFn= function(){
    return $scope.value ? $scope.value :false;
}
});

</script>

</body>
</html>

【讨论】：

您提供的代码示例是AngularJs代码，这根本无助于回答OP。