打字稿错误类型上不存在属性答案

【问题标题】：Typescript error Property does not exist on type打字稿错误类型上不存在属性
【发布时间】：2017-03-26 16:25:10
【问题描述】：

我是 angularjs 2 和 ionic 2 的新手。我正在使用带有 Validators、FormControl 和 FormGroup 的 angularjs 表单。当我使用 ionic serve --lab 执行项目时，一切都很好。但是当我构建该项目时，它给出了 error: Property 'username' does not exist on type.

login.ts

import { Component } from '@angular/core';

import { LoadingController, NavController } from 'ionic-angular';

import { AuthService } from '../../service/authService';

import {Validators, FormBuilder, FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'page-login',
  templateUrl: 'login.html'
})
export class LoginPage {

  user: any;

  submitAttempt: boolean = false;

  slideTwoForm : FormGroup;

  constructor(public navCtrl: NavController, 
              public authService: AuthService,
              public loadingCtrl: LoadingController, 
              private formBuilder: FormBuilder) {

    this.slideTwoForm = formBuilder.group({
      username: ['', Validators.compose([Validators.minLength(5),          Validators.required])],
      description: ['', Validators.required],
      age: ['']
    });
  }

  logForm() {
    if (!this.slideTwoForm.valid) {
      this.submitAttempt = true;
    }
  }

}

login.html

<ion-content padding>
    <form [formGroup]="slideTwoForm" (ngSubmit)="logForm()" novalidate>
        <ion-item>
            <ion-label floating>Username</ion-label>
            <ion-input #username formControlName="username" type="text"></ion-input>
        </ion-item>
        <ion-item *ngIf="!slideTwoForm.controls.username.valid  && submitAttempt">
            <p>Please enter a valid name.</p>
        </ion-item>
        <ion-item>
          <ion-label>Description</ion-label>
          <ion-textarea formControlName="description"></ion-textarea>
        </ion-item>
        <ion-item>
            <ion-label floating>Age</ion-label>
            <ion-input formControlName="age" type="number"></ion-input>
        </ion-item>
        <ion-item *ngIf="!slideTwoForm.controls.age.valid  && submitAttempt">
            <p>Please enter a valid age.</p>
        </ion-item>
        <button ion-button type="submit">Submit</button>
    </form>
</ion-content>

一切都很好，直到我运行 ionic build android 命令生成 apk 文件。
有人可以告诉我为什么会收到这些错误吗？

我也参考了这个链接：Property does not exist on type. TypeScript 但它帮不了我：

【问题讨论】：

标签： angular typescript ionic2 angularjs-forms

【解决方案1】：

Ionic2 在构建到 android 时使用提前编译。 AoT 要求：

A) 要公开的属性

B) html 中提到的要在组件中声明的属性。

所以要解决您的问题，请声明公共用户名：字符串；在组件中并声明您在表单中访问的其他名称。

或者...在 html 中你可以写 formControlName='user.username' 并使用你已经声明的属性。

不要忘记在组件中声明你的 elementref

【讨论】：

我可以让 AOT 编译器忽略这些 html 类型错误
@kolexinfos 没有看到您的评论，但请查看其他答案。他们通过使用 [] property get 忽略了错误，因此没有对其进行静态编译器检查。这就是你如何让它忽略问题

【解决方案2】：

<ion-content padding>
    <form [formGroup]="slideTwoForm" (ngSubmit)="logForm()" novalidate>
        <ion-item>
            <ion-label floating>Username</ion-label>
            <ion-input #username formControlName="username" type="text"></ion-input>
        </ion-item>
        <ion-item *ngIf="!slideTwoForm.controls["username"].valid  && submitAttempt">
            <p>Please enter a valid name.</p>
        </ion-item>
        <ion-item>
          <ion-label>Description</ion-label>
          <ion-textarea formControlName="description"></ion-textarea>
        </ion-item>
        <ion-item>
            <ion-label floating>Age</ion-label>
            <ion-input formControlName="age" type="number"></ion-input>
        </ion-item>
        <ion-item *ngIf="!slideTwoForm.controls["age"].valid  && submitAttempt">
            <p>Please enter a valid age.</p>
        </ion-item>
        <button ion-button type="submit">Submit</button>
    </form>
</ion-content>

【讨论】：

感谢@dhyanandra