Question

我正在动态获取类别列表，并基于选择再次通过ID动态获取课程列表。我正在使用formControlName将vale传递给数据库。在获取课程列表时，我需要所选课程类别的ID。因此，我将值设置为[value]="category.QuickCat_ID"，并在标签中显示要写入的类别名称{{category.QuickCat_Name}}。我是安倍拿起类别ID，并使用它我也获得课程列表。但是，我得到类别ID到我的数据库（控制台）而不是类别名称。我正在编写下面的代码；

html文件；

<div class="form-group col-xs-12 clearfix" style="padding: 0px">
      <label for="courseOfInterest">Course Interested In</label>
      <br>
      <div class="col-xs-12 textboxsize" style="padding:0px !important">
        <select class="form-control textboxsize" formControlName="QuickCat_Name" style="padding-top: 3px;" id="courseCat" (change)="onChange($event)">
          <option [ngValue]="undefined" disabled style="color:lightgray">Select Course Category</option>              
          <option *ngFor="let category of selectCourseCat" [value]="category.QuickCat_ID" id="catId">{{category.QuickCat_Name}}</option>
        </select>
      </div>
    </div>

    <div class="form-group col-xs-12 clearfix" style="padding: 0px">
      <label for="courseName">Course Name</label>
      <select class="form-control textboxsize" formControlName="QuickCourseName"  style="padding-top: 3px;" id="courseName" (change)="getCourseName($event)">
        <option [ngValue]="undefined" disabled style="color:lightgray">Select Course Name</option>
        <option *ngFor="let name of selectCourseName" [value]="name.QuickCourseName" id="coursename">{{name.QuickCourseName}}</option>
      </select>
    </div>

ts文件； `

export class Studentform1Component implements OnInit {
  selectCountries: string [];  
  selectCourseCat: string [];
  selectCourseName: string [];
  value = 2;
  idValue: number;
  i: number;
  public onChange(event): void{
    const newVal = event.target.value;
    console.log(newVal);
    this.httpService.get('url?Id='+newVal).subscribe(
      data => {
        this.selectCourseName = data as string [];
        console.log(this.selectCourseName);
      },
      (err:HttpErrorResponse) => {
        console.log(err.message);
      }
      );
  }

`

我想要QuickCat_Name（发送到数据库）和QuickCat_ID（获取课程列表）。

谢谢：）

Answer 1

将完整类别对象作为值传递：

<option *ngFor="let category of selectCourseCat" [value]="category" id="catId">{{category.QuickCat_Name}}</option>

这将为您提供函数参数的整个对象。

Answer 2

由于您拥有数组selectCourseCat，因此使用ID

从数组中获取名称。

this.selectCourseCat.filter(x => x.QuickCat_ID == newVal)[0].QuickCat_Name

这将返回下拉菜单的text，然后如果您希望从上面的代码中删除QuickCat_Name作为对象，则可以绑定它

public onChange(event): void{
    const newVal = event.target.value;
    let name = this.selectCourseCat.filter(x => x.QuickCat_ID == newVal)[0].QuickCat_Name;
    this.httpService.get('url?Id='+newVal).subscribe(
      data => {
        this.selectCourseName = data as string [];
        console.log(this.selectCourseName);
      },
      (err:HttpErrorResponse) => {
        console.log(err.message);
      }
      );
  }

希望这会有所帮助-编码愉快：）

Answer 3

这是 ngValue 的用途：

https://angular.io/api/forms/SelectControlValueAccessor#how-to-use-select-controls-with-form-directives

如果您的选项值是简单字符串，则可以绑定到选项的常规值属性。如果您的选项值恰好是对象（并且您希望将所选内容保存为表单中的对象），请改用ngValue

Answer 4

您需要遵循两个步骤来实现这一目标-

您可以将整个对象传递给option，该值将成为select的值。

html

     <select class="form-control textboxsize" 
     formControlName="QuickCourseName"  
     [compareWith]="compareFn" <!-- Compare with -->
     style="padding-top: 3px;" 
     id="courseName" (change)="getCourseName($event)">
        <option [ngValue]="undefined" disabled style="color:lightgray">Select Course Name</option>
        <option *ngFor="let name of selectCourseName" [ngValue]="name" id="coursename">{{name.QuickCourseName}}</option>
      </select>

在compareWith控件中使用select，否则它将不会选择默认值-

ts

  compareFn(a, b) {
    if (!a || !b) {
      return false;
    } else {
      return a.QuickCourseName === b.QuickCourseName; //<-- you can other property of name
    }
  }

示例示例在这里-https://stackblitz.com/edit/hello-angular-6-2z9f3b

Answer 5

希望这会有所帮助示例：

  Value =  [
      {
        QuickCat_Name: 'Donald',
        QuickCat_ID: 1
      },
      {
        QuickCat_Name: 'Arnold',
        QuickCat_ID: 2
      }
    ]

您要在for循环中迭代该值以显示Cat_Name

<select [(ngModel)]="bindValue" (change)="onChange(bindValue)">
<option *ngFor = "let val of Value" [value]="val.QuickCat_ID">{{val.QuickCat_Name}}</option>
</select>

在TS文件中您将拥有QuickCat_ID，可以同时获得两个值

Value.forEach(obj=>{
   if(obj['QuickCat_ID'] == 'bindValue'){
    youGotIDValue = bindValue
    youGotName = obj['QuickCat_Name']
   }
})

想要同时获取id和value角6中的值

5 个答案:

html

ts