Блог

Привет, я создаю веб-страницу справки в Angular, там пользователь может отправлять «Заявки», но я застрял, проверив выбор, я получаю следующее сообщение об ОШИБКЕ:

  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 habenn 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;
}
  

Что не так, я не понимаю. Ввод работает нормально, но не выбор.

Вы можете реализовать явный тест :

объявите 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==trueamp;amp;selectedItem==-1" class="alert alert-danger">
    Es wurde kein Grund Gewählt
</div>

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