Question

您好，我正在Angular中创建一个帮助页面，用户可以在其中发送“票”，但由于验证选择而卡住了，我收到以下 ERROR 消息：

 TS2339: Property 'selected' does not exist on type 'HelpComponent'.  
 <div *ngIf="selected.untouched" class="alert alert-danger">

这就是我在HTML中所做的事情：

<div class="form-group">
        <label for="selected">Was ist das Problem?*</label>
        <select   name="selected" id="selected" class="form-control" 
                  required fullWidth [ngModel]="ticket.selected">  
          <option value="null">Was ist das Problem?</option>
          <option *ngFor="let select of selectObtions">
            {{ select.name }} 
          </option>
        </select>
        <div *ngIf="selected.untouched" class="alert alert-danger">
            Es wurde kein Grund Gewählt
        </div>
      </div>

组件：

export class HelpComponent {
  private index: number = 0;

  constructor(private toastrService: NbToastrService) { }
  
  selectObtions = 
  [
    {id: 1, name: "SCAM ich will mein geld zurück"},
    {id: 2, name: "Seite lädt nicht Korrekt"},
    {id: 3, name: "Wie kann ich meine Daten ändern"},
    {id: 4, name: "ich finde mich nicht zurecht"},
  ]

  ticket = new Ticket()
  
  ticketSend(status: NbComponentStatus){
    this.ticket.selected = (<HTMLInputElement>document.getElementById("selected")).value;
    this.ticket.vorname = (<HTMLInputElement>document.getElementById("vorname")).value;
    this.ticket.nachname = (<HTMLInputElement>document.getElementById("nachname")).value;
    this.ticket.email= (<HTMLInputElement>document.getElementById("email")).value;
    this.ticket.textfeld= (<HTMLInputElement>document.getElementById("textfeld")).value;


    this.toastrService.show(`Vielen Danke ${this.ticket.vorname} ${this.ticket.nachname} das Sie das Problem ${this.ticket.textfeld} gemeldet haben\n wir werden uns so schnell es geht bei dieser E-mail adresse ${this.ticket.email} melden`, `Ticket ${this.ticket.selected} wurde gesendet`, { status, duration: 0,});
  }
}
export class Ticket{
    selected: string;
    vorname: string;
    nachname: string;
    email: string;
    textfeld: string;
}

我不明白什么是错的。输入正常，但选择无效。

Answer 1

您可以实施显式测试：

在帮助网页组件中声明selectedItem和errorMessage；

selectedItem = -1 ;
  errorMessage : boolean  = false ; 
 //change this with your selected content 
 selectObtions  = [
   { 
    id : 1,
    name : 'name  1 ' , 
   },
   {
    id : 2,
    name : 'name  2 ' , 
  },
  {
   id : 3,
   name : 'name  3 ' ,  
  }
]; 
Send(){
 if (this.selectedItem==-1){
   this.errorMessage = true ;
 } 
 else {
   this.errorMessage = false ; 
   //send the ticket !
 }
}

并在html文件中：

<div class="form-group">
<label for="selected">Was ist das Problem?*</label>
<select   name="selected" id="selected" class="form-control" 
          required fullWidth  [(ngModel)]="selectedItem" >  
  <option [value]=-1>Was ist das Problem?</option>
  <option *ngFor="let select of selectObtions" value={{select.id}}>
    {{ select.name }} 
  </option>
</select>
<div *ngIf="errorMessage==true&&selectedItem==-1" class="alert alert-danger">
    Es wurde kein Grund Gewählt
</div>

<button (click)="Send()" >Send</button>

Anguar下拉列表（选择）验证不起作用

1 个答案: