Получение объекта, идентификатора и значения из ngFor при нажатии кнопки угловой 6

Question

это HTML-код

<tr>
    <td>Select New Subject:</td>
    <td>
     <Select name="DesiredSubject" [(ngModel)] = "sub" ngDefaultControl>
       <option [value]="0">--Select Subject--</option>
       <option *ngFor ="let subj of subjects" [value]="subj">{{subj.bank_Name}}</option>
     </Select>
    </td>
  </tr>
  <tr>
    <td>Action :</td>
    <td><button value="Update Subject" (click)="changeSubject(sub)">Update Subject</button></td>
</tr>

и это мой машинописный угловой класс

 export class EditSubjectComponent implements OnInit, AfterViewInit {

  @Input()
  subject : any;
  sub : any;
  flag : boolean = false;
  subjects : ISubject[];
  constructor(private _QuestionService : QuestionService, private _toastr : ToastrService) { }

  ngOnInit() {
  }
  ngAfterViewInit(){
      this._QuestionService.getSubject().subscribe((data) => {this.subjects = data;});
    }
  changeSubject(value : any){
    this.flag = true;
    console.log(value)
   this._QuestionService.updateSubject(QID,value).subscribe((res) => {this._toastr.success("Subject Changed");
  }, err => {
       this._toastr.error("There is some problem. Please try later")
     });
    this.flag = false;
  }

}

и это то, что я получаю в журнале консоли. Я имею в виду, что он возвращает строку.

что я делаю не так? и я обновил код сейчас.

Answer 1

Проблема в том, что вы привязываете объект к свойству [value]. Если вы хотите привязать объект к вашему значению option, используйте [ngValue] вместо [value].

Также в вашем html есть опечатка, где реализовано select. Используйте <select> вместо <Select>.

Пример Stackblitz: https://stackblitz.com/edit/angular-3b5txx