Javascript 如何修复属性'；触摸'；不存在于类型'；字符串'；在my.html文件中

这是我的文件register.component.html。当我试图编译angular应用程序时，它会给我以下错误。我认为他们是相关的

   <section id="register" class="mb-5 mt-5">
  <div class="container">
    <div class="row">

      <div class="col-xs-12 col-sm-6 col-md-4 mx-auto">
        <div class="card_register">
          <div class="card">
            <div class="card-body text-center">
              <form #formRegister="ngForm" (ngSubmit)="onAddUser()">
                <h1 class="h3 mb-3 font-weight-normal">Register</h1>
                <div class="alert alert-danger" role="alert" *ngIf="isError">
                  {{msgError}}
                </div>
                <div class="form-group">
                  <input type="email" name="email" class="form-control" placeholder="Email" [(ngModel)]="email" required minlength="8">
                </div>
                <div class="alert alert-danger" role="alert" *ngIf="email.touched && !email.valid">
                  <div *ngIf="email.errors.required">Email is required</div>
                  <div *ngIf="email.errors.minlength">Email must be at least 8 characters</div>
                </div>
                <div class="form-group">
                  <input type="password" name="password" class="form-control" placeholder="Password" [(ngModel)]="password" required minlength="5"
                    maxlength="10">
                </div>
                <div class="alert alert-danger" role="alert" *ngIf="password.touched && !password.valid">
                  <div *ngIf="password.errors.required">Password is required</div>
                  <div *ngIf="password.errors.minlength">Password must be at least 5 characters</div>
                </div>
                <hr>
                <div class="form-group">
                  <h5>Seleccionar image:</h5>
                  <input type="file" accept=".png, .jpg" (change)="onUpload($event)">
                </div>
                <div class="progress">
                  <div [style.visibility]="(uploadPercent == 0) ? 'hidden' : 'visible'" class="progress-bar progress-bar-striped bg-success"
                    role="progressbar" [style.width]="(uploadPercent | async) +'%'">

                    <!-- <span class="progressText" *ngIf="urlImage | async">
                      Ok!!</span> -->
                  </div>
                </div>
                <br>
                <input #imageUser type="hidden" [value]="urlImage | async">
                <button *ngIf="urlImage | async; else btnDisabled" type="submit" class="btn btn-lg btn-primary btn-block">Registrar</button>
                <ng-template #btnDisabled>
                  <button type="submit" disabled=true class="btn btn-lg btn-secondary btn-block">Registrar</button>
                </ng-template>
                <div class="form-group">
                  <a routerLink="/user/login" class="form-control login-user">Tienes cuenta?</a>
                </div>
                <div class="form-group">
                  <button class="btn btn-block btn-social btn-facebook" (click)="onLoginFacebook()">
                    <span class="fa fa-facebook"></span>
                    FACEBOOK
                  </button>
                  <button class="btn btn-block btn-social btn-google" (click)="onLoginGoogle()">
                    <span class="fa fa-google"></span>
                    GOOGLE
                  </button>
                </div>
              </form>

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

登记
{{msgError}}
电子邮件是必需的
电子邮件必须至少包含8个字符
密码是必需的
密码必须至少为5个字符

选择图像：


登记员
登记员
蒂恩斯昆塔？
脸谱网
谷歌

src\app\components\users\register\register.component.html（17,62）中出现错误：类型“string”上不存在属性“toucted”。 src\app\components\users\register\register.component.html（17,62）：：类型“string”上不存在属性“valid”。 src\app\components\users\register\register.component.html（25,62）：：类型“string”上不存在属性“toucted”。 src\app\components\users\register\register.component.html（25,62）：：类型“string”上不存在属性“valid”。

---

src\app\components\users\register\register.component.html（35,24）：：此条件将始终返回'false'，因为类型'Observable'和'number'没有重叠。我修复了它

public email: string = ''; 

借

在my register.component.ts

中，在运行“ng build--prod”时解决以下所有错误：
to solve all the following errors when you run "ng build --prod":

ERROR in src / app / components / users / register / register.component.html (17,62): Property 'touched' does not exist on type 'string'.
src / app / components / users / register / register.component.html (17,62): Property 'valid' does not exist on type 'string'.
src / app / components / users / register / register.component.html (25,62): Property 'touched' does not exist on type 'string'.
src / app / components / users / register / register.component.html (25,62): Property 'valid' does not exist on type 'string'.
src / app / components / users / register / register.component.html (35,24): This condition will always return 'false' since the types 'Observable <number>' and '0' have no overlap.

    I had to modify the register.component.ts file like this:
  public email;
  public password;
  public touched;
  public valid;

then I modify the register.component.html file like this

 <div [style.visibility] = "(uploadPercent == [0])? 'hidden': 'visible'" class = "progress-bar progress-bar-striped bg-success"
                    role = "progressbar" [style.width] = "(uploadPercent | async) + '%'">

src/app/components/users/register/register.component.html（17,62）中出错：类型“string”上不存在属性“toucted”。
src/app/components/users/register/register.component.html（17,62）：类型“string”上不存在属性“valid”。
src/app/components/users/register/register.component.html（25,62）：类型“string”上不存在属性“toucted”。
src/app/components/users/register/register.component.html（25,62）：类型“string”上不存在属性“valid”。
src/app/components/users/register/register.component.html（35,24）：此条件将始终返回“false”，因为类型“Observable”和“0”没有重叠。
我必须修改register.component.ts文件，如下所示：
公共电子邮件；
公共密码；
触动公众；
公共有效；
然后我修改register.component.html文件，如下所示
 

---

我不得不修改register.component.ts文件，如下所示：

import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
import { AuthService } from '../../../services/auth.service';
import { Router } from '@angular/router';
import { AngularFireStorage } from '@angular/fire/storage';
import { finalize } from 'rxjs/operators';
import { Observable } from 'rxjs/internal/Observable';



@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.css']
})
export class RegisterComponent implements OnInit {
  isError: any;
  err: any;
  constructor(private router: Router, private authService: AuthService, private storage: AngularFireStorage) { }
  @ViewChild('imageUser', {static: true}) inputImageUser: ElementRef;

  public email = '';
  public password = '';



  uploadPercent: Observable<number>;
  urlImage: Observable<string>;

  ngOnInit() {
  }

  onUpload(e) {
    // console.log('subir', e.target.files[0]);
    const id = Math.random().toString(36).substring(2);
    const file = e.target.files[0];
    const filePath = `uploads/profile_${id}`;
    const ref = this.storage.ref(filePath);
    const task = this.storage.upload(filePath, file);
    this.uploadPercent = task.percentageChanges();
    task.snapshotChanges().pipe(finalize(() => this.urlImage = ref.getDownloadURL())).subscribe();
  }
  onAddUser() {
    this.authService.registerUser(this.email, this.password)
      .then((res) => {
        this.authService.isAuth().subscribe(user => {
          if (user) {
            user.updateProfile({
              displayName: '',
              photoURL: this.inputImageUser.nativeElement.value
            }).then(() => {
              this.router.navigate(['/dashboard']);
            }).catch((error) => console.log('error', error));
          }
        });
      }).catch(err => console.log('err', err.message));
  }
  onLoginGoogle(): void {
    this.authService.loginGoogleUser()
      .then((res) => {
        this.onLoginRedirect();
      }).catch(err => console.log('err', err.message));
  }
  onLoginFacebook(): void {
    this.authService.loginFacebookUser()
      .then((res) => {
        this.onLoginRedirect();
      }).catch(err => console.log('err', err.message));
  }

  onLoginRedirect(): void {
    this.router.navigate(['/dashboard']);
  }

}

<section id="register" class="mb-5 mt-5">
  <div class="container" style="width: 100%;">
    <div class="row">

      <div class="col-xs-12 col-sm-6 col-md-4 mx-auto">
        <div class="card_register">
          <div class="card">
            <div class="card-body text-center">
              <form #formRegister="ngForm" (ngSubmit)="onAddUser()">
                <h1 class="h3 mb-3 font-weight-normal">Register</h1>
                <div class="alert alert-danger" role="alert" *ngIf="isError">
                  {{msgError}}
                </div>
                <div class="form-group">
                  <input type="email" name="email" class="form-control" placeholder="Email" [(ngModel)]="email" required minlength="8">
                </div>
                <div class="alert alert-danger" role="alert" *ngIf="email['touched'] && !email['valid']">
                  <div *ngIf="email.errors.required">Email is required</div>
                  <div *ngIf="email.errors.minlength">Email must be at least 8 characters</div>
                </div>
                <div class="form-group">
                  <input type="password" name="password" class="form-control" placeholder="Password" [(ngModel)]="password" required minlength="5"
                    maxlength="10">
                </div>
                <div class="alert alert-danger" role="alert" *ngIf="password['touched'] && !password['valid']">
                  <div *ngIf="password.errors.required">Password is required</div>
                  <div *ngIf="password.errors.minlength">Password must be at least 5 characters</div>
                </div>
                <hr>
                <div class="form-group" style="width: auto">
                <h5>Selectionner image:</h5>
                  <input type="file" accept=".png, .jpg" (change)="onUpload($event)">
                </div>
                <div class="progress">
                  <div [style.visibility]="(uploadPercent == [0]) ? 'hidden' : 'visible'" class="progress-bar progress-bar-striped bg-success"
                    role="progressbar" [style.width]="(uploadPercent | async) +'%'">

                    <!-- <span class="progressText" *ngIf="urlImage | async">
                      Ok!!</span> -->
                  </div>
                </div>
                <br>
                <input #imageUser type="hidden" [value]="urlImage | async">
                <button *ngIf="urlImage | async; else btnDisabled" type="submit" class="btn btn-lg btn-primary btn-block">Register</button>
                <ng-template #btnDisabled>
                  <button type="submit" disabled=true class="btn btn-lg btn-secondary btn-block">Register</button>
                </ng-template>
                <div class="form-group">
                  <a routerLink="/user/login" class="form-control login-user">Do you have account?</a>
                </div>
                <div class="form-group">
                  <button class="btn btn-block btn-social btn-facebook" (click)="onLoginFacebook()">
                    <!-- <span class="fa fa-facebook"></span> -->
                    FACEBOOK
                  </button>
                  <button class="btn btn-block btn-social btn-google" (click)="onLoginGoogle()">
                    <!-- <span class="fa fa-google"></span> -->
                    GOOGLE
                  </button>
                </div>
              </form>

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

从'@angular/core'导入{Component，OnInit，ElementRef，ViewChild}；
从“../../../services/auth.service”导入{AuthService}；
从'@angular/Router'导入{Router}；
从'@angular/fire/storage'导入{AngularFireStorage}；
从“rxjs/operators”导入{finalize}；
从'rxjs/internal/Observable'导入{Observable}；
@组成部分({
选择器：“应用程序寄存器”，
templateUrl:“./register.component.html”，
样式URL:['./register.component.css']
})
导出类RegisterComponent实现OnInit{
伊瑟罗：任何；
错误：任何；
构造函数（专用路由器：路由器，专用authService:authService，专用存储：AngularFireStorage）{}
@ViewChild（'imageUser'，{static:true}）inputImageUser:ElementRef；
公共电子邮件=“”；
公共密码=“”；
上传百分比：可见；
图像：可见；
恩戈尼尼特（）{
}
onUpload（东）{
//console.log（'subir'，e.target.files[0]）；
const id=Math.random（）.toString（36）.子字符串（2）；
const file=e.target.files[0]；
const filePath=`uploads/profile_${id}`；
const ref=this.storage.ref（文件路径）；
const task=this.storage.upload（文件路径，文件）；
this.uploadPercent=task.percentageChanges（）；
task.snapshotChanges（）.pipe（finalize（（）=>this.urlImage=ref.getDownloadURL（））.subscribe（）；
}
onAddUser（）{
this.authService.registerUser（this.email，this.password）
。然后（（res）=>{
this.authService.isAuth（）.subscribe（用户=>{
如果（用户）{
user.updateProfile({
显示名称：“”，
photoURL:this.inputImageUser.nativeElement.value
}).然后（（）=>{
this.router.navigate（['/dashboard']）；
}).catch（（错误）=>console.log（'error'，error））；
}
});
}).catch（err=>console.log（'err'，err.message））；
}
onLoginGoogle（）：void{
this.authService.loginGoogleUser（）
。然后（（res）=>{
this.onLoginDirect（）；
}).catch（err=>console.log（'err'，err.message））；
}
onLoginFacebook（）：void{
this.authService.loginFacebookUser（）
。然后（（res）=>{
this.onLoginDirect（）；
}).catch（err=>console.log（'err'，err.message））；
}
onLoginDirect（）：void{
this.router.navigate（['/dashboard']）；
}
}

我修改了register.component.html文件，如下所示：

import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
import { AuthService } from '../../../services/auth.service';
import { Router } from '@angular/router';
import { AngularFireStorage } from '@angular/fire/storage';
import { finalize } from 'rxjs/operators';
import { Observable } from 'rxjs/internal/Observable';



@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.css']
})
export class RegisterComponent implements OnInit {
  isError: any;
  err: any;
  constructor(private router: Router, private authService: AuthService, private storage: AngularFireStorage) { }
  @ViewChild('imageUser', {static: true}) inputImageUser: ElementRef;

  public email = '';
  public password = '';



  uploadPercent: Observable<number>;
  urlImage: Observable<string>;

  ngOnInit() {
  }

  onUpload(e) {
    // console.log('subir', e.target.files[0]);
    const id = Math.random().toString(36).substring(2);
    const file = e.target.files[0];
    const filePath = `uploads/profile_${id}`;
    const ref = this.storage.ref(filePath);
    const task = this.storage.upload(filePath, file);
    this.uploadPercent = task.percentageChanges();
    task.snapshotChanges().pipe(finalize(() => this.urlImage = ref.getDownloadURL())).subscribe();
  }
  onAddUser() {
    this.authService.registerUser(this.email, this.password)
      .then((res) => {
        this.authService.isAuth().subscribe(user => {
          if (user) {
            user.updateProfile({
              displayName: '',
              photoURL: this.inputImageUser.nativeElement.value
            }).then(() => {
              this.router.navigate(['/dashboard']);
            }).catch((error) => console.log('error', error));
          }
        });
      }).catch(err => console.log('err', err.message));
  }
  onLoginGoogle(): void {
    this.authService.loginGoogleUser()
      .then((res) => {
        this.onLoginRedirect();
      }).catch(err => console.log('err', err.message));
  }
  onLoginFacebook(): void {
    this.authService.loginFacebookUser()
      .then((res) => {
        this.onLoginRedirect();
      }).catch(err => console.log('err', err.message));
  }

  onLoginRedirect(): void {
    this.router.navigate(['/dashboard']);
  }

}

<section id="register" class="mb-5 mt-5">
  <div class="container" style="width: 100%;">
    <div class="row">

      <div class="col-xs-12 col-sm-6 col-md-4 mx-auto">
        <div class="card_register">
          <div class="card">
            <div class="card-body text-center">
              <form #formRegister="ngForm" (ngSubmit)="onAddUser()">
                <h1 class="h3 mb-3 font-weight-normal">Register</h1>
                <div class="alert alert-danger" role="alert" *ngIf="isError">
                  {{msgError}}
                </div>
                <div class="form-group">
                  <input type="email" name="email" class="form-control" placeholder="Email" [(ngModel)]="email" required minlength="8">
                </div>
                <div class="alert alert-danger" role="alert" *ngIf="email['touched'] && !email['valid']">
                  <div *ngIf="email.errors.required">Email is required</div>
                  <div *ngIf="email.errors.minlength">Email must be at least 8 characters</div>
                </div>
                <div class="form-group">
                  <input type="password" name="password" class="form-control" placeholder="Password" [(ngModel)]="password" required minlength="5"
                    maxlength="10">
                </div>
                <div class="alert alert-danger" role="alert" *ngIf="password['touched'] && !password['valid']">
                  <div *ngIf="password.errors.required">Password is required</div>
                  <div *ngIf="password.errors.minlength">Password must be at least 5 characters</div>
                </div>
                <hr>
                <div class="form-group" style="width: auto">
                <h5>Selectionner image:</h5>
                  <input type="file" accept=".png, .jpg" (change)="onUpload($event)">
                </div>
                <div class="progress">
                  <div [style.visibility]="(uploadPercent == [0]) ? 'hidden' : 'visible'" class="progress-bar progress-bar-striped bg-success"
                    role="progressbar" [style.width]="(uploadPercent | async) +'%'">

                    <!-- <span class="progressText" *ngIf="urlImage | async">
                      Ok!!</span> -->
                  </div>
                </div>
                <br>
                <input #imageUser type="hidden" [value]="urlImage | async">
                <button *ngIf="urlImage | async; else btnDisabled" type="submit" class="btn btn-lg btn-primary btn-block">Register</button>
                <ng-template #btnDisabled>
                  <button type="submit" disabled=true class="btn btn-lg btn-secondary btn-block">Register</button>
                </ng-template>
                <div class="form-group">
                  <a routerLink="/user/login" class="form-control login-user">Do you have account?</a>
                </div>
                <div class="form-group">
                  <button class="btn btn-block btn-social btn-facebook" (click)="onLoginFacebook()">
                    <!-- <span class="fa fa-facebook"></span> -->
                    FACEBOOK
                  </button>
                  <button class="btn btn-block btn-social btn-google" (click)="onLoginGoogle()">
                    <!-- <span class="fa fa-google"></span> -->
                    GOOGLE
                  </button>
                </div>
              </form>

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

登记
{{msgError}}
电子邮件是必需的
电子邮件必须至少包含8个字符