Question

所以我有这个HTML字段，可以在其中输入一些文本。我可以将其发送到API，并且没有问题。但是，是否可以将输入字段作为下拉列表并获得相同的结果？

我尝试了一种方法，但是我仍然无法将2个属性绑定到我的NgModel中，以使数据进入我的API。因此，我在.ts文件中有这些硬编码的列表，以测试此方法是否有效。我在输入字段中输入了值，但无法将其发送到API。

HTML

<div fxLayout="row" fxLayoutAlign="center start">
  <div fxLayout="column" class="term-detail">
     <ejs-dropdownlist [dataSource]='data' [(value)]='value' placeholder='Select a Term'></ejs-dropdownlist>
     <div style='margin-top: 50px'>
        <input matInput type="text" [(ngModel)]="value" />
     </div>
  </div>
</div>
  <button (click)="onSave()">Tallenna</button>

TYPESCRIPT文件

export class SelectTermComponent implements OnInit {

  terms: Term;

  constructor(private service: TermService, private httpService: TermHttpService, private router: Router ) {

    this.terms = new Term();
   }

    public data: string[] = ['Test 1', 'Test 2', 'Test 3', 'Test 4'];

    public value: 'Badminton';


  ngOnInit() {

  }

  onSave() {
    console.log('data sent to DB!');
    this.httpService.create(this.terms).subscribe(result => {
      console.log(result);
    });

    this.router.navigate(['termselected']);
    console.log('navigated to termSelected');

  }

这是不选择下拉列表的情况下的工作方式：

<mat-form-field floatPlaceholder="auto">
  <input matInput [(ngModel)]="terms.source" required
             placeholder="Lähtökäsite">
</mat-form-field>

Term.ts

export class Term {
  termId: number;
  termValue: string;
  termArrow: string;
  source: number;
  target: number;

  constructor(termId?: number, termValue?: string, termArrow?: string, source?: number, target?: number) {

    this.termId = termId;
    this.termValue = termValue;
    this.termArrow = termArrow;
    this.source = source;
    this.target = target;

  }

}

我希望数据能够进入API，但是由于ngModel具有“值”绑定而不是“ term.x”绑定，所以我认为不是这样。有什么想法吗？

有没有一种方法可以保存来自dropdownlist-input字段的数据？

0 个答案: