单击按钮时从 ngFor 获取对象、id 和值 angular 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>

这是我的打字稿angularclass

 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

单击按钮时从 ngFor 获取对象、id 和值 angular 6

Geting object, both id and value from ngFor on button click angular 6

angular

angular5

angular6