程序员最近都爱上了这个网站  程序员们快来瞅瞅吧！  it98k网:it98k.com

我的 app.component.html 代码是：

    <h1>Password Generator</h1>
<div>
<label>Length</label>
</div>
<input (input)="onChangeLength($event.target.value)"/>
<div>
<div>
  <input (change)="onChangeHandlerLetter()" type="checkbox" />
  <label>Use Letter</label>
</div>
<div>
  <input (change)="onChangeHandlerNumbers()" type="checkbox" />
  <label>Use Numbers</label>
</div>
<div>
  <input (change)="onChangeHandlerSymbols()" type="checkbox" />
  <label>Use Symbols</label>
</div>
<div>
  <button (click)="onButtonClick()">Generate</button>
  </div>
</div>
<div>
  <label>Your Password</label>
</div>
<input [value]="password"/>

{{password}}

我的 app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  length=0;
  includeLetters=false;
  includeSymbols=false;
  includeNumbers=false
  onChangeHandlerLetter=()=>{
    this.includeLetters=!this.includeLetters
  }
  onChangeHandlerSymbols=()=>{
    this.includeSymbols=!this.includeSymbols
  }
  onChangeHandlerNumbers=()=>{
    this.includeNumbers=!this.includeNumbers
  }
  onChangeLength=(val:string)=>{
    const parsedValue=parseInt(val);
    if(!isNaN(parsedValue)){
      this.length=parsedValue
    }
    console.log(length);
  }
  password=" "
  onButtonClick=()=>{
  this.password="My Password"
  console.log("button clicked");
  console.log(`Following should be included :
              Sybmols : ${this.includeSymbols}
              Numbers : ${this.includeNumbers}
              Letters : ${this.includeLetters}`)
 }

}

错误 ：

index.js:561 [webpack-dev-server] ERROR
src/app/app.component.html:5:46 - error TS2531: Object is possibly 'null'.

5 <input (input)="onChangeLength($event.target.value)"/>
                                               ~~~~~

  src/app/app.component.ts:5:16
    5   templateUrl: './app.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component AppComponent.

你好问候社区，我是 TS 和角度的新手所以我不知道为什么我会收到这个错误我需要从输入栏获取输入并更改为数字和 console.log 我正在学习教程并且他正在获得正确的输出我没有知道为什么

解决方案

您需要告诉 TypeScript 的类型HTMLElement是您的目标。

为此，请使用 $event 而不是 $event.target.value，如下所示：

<input (input)="onChangeLength($event)"/>

然后在 app.component.ts 中使用：

const parsedValue=parseInt((<HTMLInputElement>event.target).value);

工作代码：

应用程序组件.ts

import { Component } from '@angular/core';
import { ColdObservable } from 'rxjs/internal/testing/ColdObservable';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  length=0;
  includeLetters=false;
  includeSymbols=false;
  includeNumbers=false
  onChangeHandlerLetter=()=>{
    this.includeLetters=!this.includeLetters
  }
  onChangeHandlerSymbols=()=>{
    this.includeSymbols=!this.includeSymbols
  }
  onChangeHandlerNumbers=()=>{
    this.includeNumbers=!this.includeNumbers
  }
  onChangeLength=( event: Event)=>{
    
     const parsedValue=parseInt((<HTMLInputElement>event.target).value);
     if(!isNaN(parsedValue)){
       this.length=parsedValue
     }
     console.log(length);
  }
  password=" "
  onButtonClick=()=>{
  this.password="My Password"
  console.log("button clicked");
  console.log(`Following should be included :
              Sybmols : ${this.includeSymbols}
              Numbers : ${this.includeNumbers}
              Letters : ${this.includeLetters}`)
 }

}

应用程序组件.html

<h1>Password Generator</h1>
<div>
<label>Length</label>
</div>
<input (input)="onChangeLength($event)"/>
<div>
<div>
  <input (change)="onChangeHandlerLetter()" type="checkbox" />
  <label>Use Letter</label>
</div>
<div>
  <input (change)="onChangeHandlerNumbers()" type="checkbox" />
  <label>Use Numbers</label>
</div>
<div>
  <input (change)="onChangeHandlerSymbols()" type="checkbox" />
  <label>Use Symbols</label>
</div>
<div>
  <button (click)="onButtonClick()">Generate</button>
  </div>
</div>
<div>
  <label>Your Password</label>
</div>
<input [value]="password"/>

{{password}}