类型上不存在属性。打字稿
Posted
技术标签:
【中文标题】类型上不存在属性。打字稿【英文标题】：Property does not exist on type. TypeScript 【发布时间】：2017-03-02 00:30:28 【问题描述】：我构建了一个简单的表单，在 Ionic 2 中对其进行了一些验证。该表单在 ionic serve 中运行良好，但不适用于 ionic run。我相信问题不在于离子，而在于我的类型脚本。不知何故，我不能导入正确的东西或没有定义正确的属性。这是我的代码。
import Component from '@angular/core';
import NavController from 'ionic-angular';
import Validators, FormBuilder, FormGroup from '@angular/forms';
import Http, Request, RequestMethod from '@angular/http';
/*
Generated class for the ContactUs page.
See http://ionicframework.com/docs/v2/components/#navigation for more info on
Ionic pages and navigation.
*/
@Component(
selector: 'page-contact',
templateUrl: 'contact.html'
)
export class Contact
inputGroup: FormGroup;
buttonDisabled = true;
fullNameError = false;
emailError = false;
subjectError = false;
messageError = false;
constructor(public navCtrl: NavController, private formBuilder: FormBuilder, http: Http)
this.inputGroup = this.formBuilder.group(
fullName: ['', Validators.compose([Validators.maxLength(30), Validators.pattern('[a-zA-Z ]*'), Validators.required])],
email: ['', Validators.compose([Validators.required])],
subject: ['', Validators.compose([Validators.maxLength(30), Validators.pattern('[a-zA-Z ]*'), Validators.required])],
message: ['', Validators.compose([Validators.maxLength(500), Validators.pattern('[a-zA-Z ]*'), Validators.required])],
);
adjustButton()
if(this.inputGroup.controls.fullName.valid == true)
this.fullNameError = false;
if(this.inputGroup.controls.email.valid == true)
this.emailError = false;
if(this.inputGroup.controls.subject.valid == true)
this.subjectError = false;
if(this.inputGroup.controls.message.valid == true)
this.messageError = false;
something()
console.log("Something happened");
onClick()
// if the fullName field is not valid display error
if(!this.inputGroup.controls.fullName.valid)
this.fullNameError = true;
else
this.fullNameError = false;
if(!this.inputGroup.controls.email.valid)
this.emailError = true;
else
this.emailError = false;
if(!this.inputGroup.controls.subject.valid)
this.subjectError = true;
else
this.subjectError = false;
if(!this.inputGroup.controls.message.valid)
this.messageError = true;
else
this.messageError = false;
ionViewDidLoad()
console.log('Hello ContactUs Page');
然后这是我的错误日志。
01:23:43] ngc: Error: Error at /Users/Zach/Desktop/badgerLoop/badgerloop_app_v2/.tmp/pages/contact/contact.ts:40:30: Property 'fullName' does not exist on type ' [key: string]: AbstractControl; '.
Error at /Users/Zach/Desktop/badgerLoop/badgerloop_app_v2/.tmp/pages/contact/contact.ts:44:30: Property 'email' does not exist on type ' [key: string]: AbstractControl; '.
Error at /Users/Zach/Desktop/badgerLoop/badgerloop_app_v2/.tmp/pages/contact/contact.ts:48:30: Property 'subject' does not exist on type ' [key: string]: AbstractControl; '.
Error at /Users/Zach/Desktop/badgerLoop/badgerloop_app_v2/.tmp/pages/contact/contact.ts:52:30: Property 'message' does not exist on type ' [key: string]: AbstractControl; '.
Error at /Users/Zach/Desktop/badgerLoop/badgerloop_app_v2/.tmp/pages/contact/contact.ts:63:31: Property 'fullName' does not exist on type ' [key: string]: AbstractControl; '.
Error at /Users/Zach/Desktop/badgerLoop/badgerloop_app_v2/.tmp/pages/contact/contact.ts:72:31: Property 'email' does not exist on type ' [key: string]: AbstractControl; '.
Error at /Users/Zach/Desktop/badgerLoop/badgerloop_app_v2/.tmp/pages/contact/contact.ts:78:31: Property 'subject' does not exist on type ' [key: string]: AbstractControl; '.
Error at /Users/Zach/Desktop/badgerLoop/badgerloop_app_v2/.tmp/pages/contact/contact.ts:84:31: Property 'message' does not exist on type ' [key: string]: AbstractControl; '.
Error at /Users/Zach/Desktop/badgerLoop/badgerloop_app_v2/.tmp/pages/contact/contact.ngfactory.ts:788:41: Property 'fullName' does not exist on type 'Contact'.
Error at /Users/Zach/Desktop/badgerLoop/badgerloop_app_v2/.tmp/pages/contact/contact.ngfactory.ts:820:41: Property 'email' does not exist on type 'Contact'.
Error at /Users/Zach/Desktop/badgerLoop/badgerloop_app_v2/.tmp/pages/contact/contact.ngfactory.ts:857:41: Property 'subject' does not exist on type 'Contact'.
Error at /Users/Zach/Desktop/badgerLoop/badgerloop_app_v2/.tmp/pages/contact/contact.ngfactory.ts:889:41: Property 'message' does not exist on type 'Contact'.
Error at /Users/Zach/Desktop/badgerLoop/badgerloop_app_v2/.tmp/pages/contact/contact.ngfactory.ts:1175:43: Property 'fullName' does not exist on type 'Contact'.
Error at /Users/Zach/Desktop/badgerLoop/badgerloop_app_v2/.tmp/pages/contact/contact.ngfactory.ts:1190:43: Property 'email' does not exist on type 'Contact'.
Error at /Users/Zach/Desktop/badgerLoop/badgerloop_app_v2/.tmp/pages/contact/contact.ngfactory.ts:1205:43: Property 'subject' does not exist on type 'Contact'.
Error at /Users/Zach/Desktop/badgerLoop/badgerloop_app_v2/.tmp/pages/contact/contact.ngfactory.ts:1220:43: Property 'message' does not exist on type 'Contact'.
at check (/Users/Zach/Desktop/badgerLoop/badgerloop_app_v2/node_modules/@angular/tsc-wrapped/src/tsc.js:31:15)
at Tsc.typeCheck (/Users/Zach/Desktop/badgerLoop/badgerloop_app_v2/node_modules/@angular/tsc-wrapped/src/tsc.js:86:9)
at /Users/Zach/Desktop/badgerLoop/badgerloop_app_v2/node_modules/@angular/tsc-wrapped/src/main.js:33:23
at process._tickCallback (internal/process/next_tick.js:103:7)
at Module.runMain (module.js:606:11)
at run (bootstrap_node.js:394:7)
at startup (bootstrap_node.js:149:9)
at bootstrap_node.js:509:3
[01:23:43] ngc: Compilation failed
[01:23:43] ngc failed: NGC encountered an error
[01:23:43] Error: NGC encountered an error
at ChildProcess.<anonymous> (/Users/Zach/Desktop/badgerLoop/badgerloop_app_v2/node_modules/@ionic/app-scripts/dist/ngc.js:62:24)
at emitTwo (events.js:106:13)
at ChildProcess.emit (events.js:191:7)
at maybeClose (internal/child_process.js:877:16)
at Socket.<anonymous> (internal/child_process.js:334:11)
at emitOne (events.js:96:13)
at Socket.emit (events.js:188:7)
at Pipe._handle.close [as _onclose] (net.js:498:12)
Error running ionic app script "build": Error: NGC encountered an error
谁能告诉我为什么我会收到这些错误？
【问题讨论】：
我在运行ionic build browser时遇到了完全相同的问题
【参考方案1】：
也许可以尝试设置这样的属性（with apexes）：
this.inputGroup = this.formBuilder.group(
'fullName': [...],
'email': [...],
'subject': [...],
'message': [...],
);
在你的 .html 中：
<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
<ion-item>
<ion-label>FullName</ion-label>
<ion-input formControlName="fullName"></ion-input>
</ion-item>
</form>
编辑：这是 RC.1 中的工作示例：
.ts
export class RootRegistrazione
myForm: FormGroup;
userInfo: phone: string = phone: '';
constructor(public navCtrl: NavController, public formBuilder: FormBuilder)
this.myForm = this.formBuilder.group(
'phone': ['', this.phoneValidator.bind(this)]
);
phoneValidator(control: FormControl): [s: string]: boolean
if (control.value !== '')
if (!control.value.match(/^[0-9]3-[0-9]7$/))
return invalidPhone: true;
isValid(field: string)
let formField = this.myForm.get(field);
return formField.valid || formField.pristine;
onSubmit()
console.log('submitting form');
.html
<ion-content padding class="registration">
<ion-list>
<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
<ion-item>
<ion-label color="primary" stacked>Cellphone</ion-label>
<ion-input [(ngModel)]="userInfo.phone" formControlName="phone" type="text"></ion-input>
</ion-item>
<p *ngIf="!isValid('phone')" color="danger" padding-left>Invalid number, expected format "012-3456789"</p>
<button ion-button full color="favorite" type="submit" [disabled]="!myForm.valid">Create Account</button>
</form>
</ion-list>
</ion-content>
希望我现在可以帮助你:)
【讨论】：
@NieldeWet 检查添加的代码是否可能有助于解决您的问题 :) 你的代码工作的原因是你没有在你的html模板中使用点符号。请看我的回答。【参考方案2】：确保您导入 FormControl 并使用“formcontrolname”分配输入值。
在你的 HTML 中使用
<ion-input formControlName="fullName" type="text"></ion-input>
在您的 TS 中：
public fullName: FormControl;
constructor(public navCtrl: NavController, private formBuilder: FormBuilder, http: Http)
this.fullName = new FormControl("", Validators.compose([Validators.maxLength(30), Validators.pattern('[a-zA-Z ]*'), Validators.required]));
this.inputGroup = this.formBuilder.group(
fullName: this.fullName,
);
【讨论】：
我不确定您为什么会出现错误的抽象控制。你在用吗。猜猜我们正在使用 FormControl 而不是 AbstractControl。确保您已安装 "@angular/forms": "^2.0.0"。您使用的 ionic 版本是什么？【参考方案3】：我设法通过不使用点符号来访问地图属性来解决这个问题。
您在控制器中使用点符号（例如!this.inputGroup.controls.fullName.valid）。我认为这很好，但是如果您在模板中使用点表示法（例如*ngIf="inputGroup.controls.fullName"），由于即时编译器（JIT）和提前编译器（AoT）之间的差异，您将遇到这个问题）。我认为 ionic serve 使用 JIT，但 ionic build 使用 AoT。
在您的模板中，将用法更改为如下所示：inputGroup.controls['fullName']
This 线程帮助我理解了问题。
$ ionic info
Your system information:
Cordova CLI: 6.3.1
Ionic Framework Version: 2.0.0-rc.0
Ionic CLI Version: 2.1.0
Ionic App Lib Version: 2.1.0-beta.1
OS: Distributor ID: Ubuntu Description: Ubuntu 16.04.1 LTS
Node Version: v6.6.0
【讨论】：
我在我的控制器中修复了这个问题，并为每个控件添加了一个定义，例如'fullName：any;'非常感谢！ 我喜欢这个解决方案，但另一种选择是在应用程序的tsconfig.json 文件中的"angularCompilorOptions" 中设置"fullTemplateTypeCheck": false。当然，只有在您确定编译器错误时才应该考虑这样做。以上是关于类型上不存在属性。打字稿的主要内容，如果未能解决你的问题，请参考以下文章
类型“typeof File”离子打字稿上不存在属性“moveFile”
“键盘”类型上不存在打字稿错误属性“hideKeyboardAccessoryBar”。在 IONIC Moodle 应用程序上