angular - 如何在角度 8 中将 Datalist 与动态 json 一起使用

Question

我正在使用数据列表，其选项来自动态 json。我还在选项中使用值，该选项也与下拉选择列表一起提供。如何从选择中删除该值，任何人都可以帮助我。这是下面的代码。

home.component.html

<div>
<input type="text"  list="codes">
<datalist id="codes">
  <option *ngFor="let c of statusdata" [value]="c.id" >{{c.name}}</option>
</datalist>
</div>

home.component.ts

import { Component, OnInit } from '@angular/core';
import { CommonserviceService } from './../utilities/services/commonservice.service';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
declare var $: any;
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  statusdata: any;

  ngOnInit() {

      this.statusdata = [{ id: 1, name: 'Angular 2+' },
    { id: 2, name: 'Angular 4' },
    { id: 3, name: 'Angular 5' },
    { id: 4, name: 'Angular 6' },
    { id: 5, name: 'Angular 7' }
  ];
  }
}

标签： angulartypescript

Answer 1

问题是因为 datalist 应该只有这个例子的值

<input list="data" name="data">
<datalist id="data">
  <option value="data01">
  <option value="data02">
</datalist>

所以在你的情况下应该是

<option *ngFor="let c of statusdata" [value]="c.name">