angular 数组对象 select 特定元素

Question

我在 angular v7 工作。以下是我的后端响应

[
  {'type':'ex1','color':'red','extratype':'x'},
  {'type':'ex1','color':'yellow','extratype':'x'},
  {'type':'ex1','color':'blue',extratype:'f'},
  {'type':'ex1','color':'orange',extratype:'f'},
  {'type':'ex2','color':'gray','extratype':'r'},
  {'type':'ex2','color':'pink','extratype':'r'},
  {'type':'ex2','color':'purlple',extratype:'v'},
  {'type':'ex2','color':'green',extratype:'v'},
]

我将此响应存储在 html 选项中，如下所示：

这是ts文件


responsebackend;

results: any[] = [];

types: [] = [];

extratypes: [] = [];

ngOnInit(){
  http.get(url)
.subscribe(res => this.responsebackend = res)
}


filter(){
  this.results = this.filterCode(this.resposebackEnd);
}

filterCode(res){
  let filtered: any[] = [];
  res.forEach(val => {
    filtered.push(val)
  }
 return filtered;
}


this.types = ['ex1','ex2'];

this.extratype = ['x','f','r','v'];

这是ts代码

<label for="types">TYPES</label>

<select name="types">
  <option *ngFor="let t of types">{{t}}</option>
</select>

<label for="extratypes">extra TYPES</label>

<select name="types">
  <option *ngFor="let ex of extratypes">{{ex}}</option>
</select>


<label for="results">RESULTS</label>

<select name="results">
  <option *ngFor="let r of results.color">{{r}}</option>
</select>

如果我select例如typesex1和extratypesf我想在结果选项里面看到html标签我只想看到 types ex1 和 extratypes f

的颜色

this is a stackblitz of the problem

Answer 1

Please find the attached stackblitz here for working example.

示例 HTML :

<label for="types">TYPES</label>

<select name="types">
  <option *ngFor="let t of types">{{t}}</option>
</select>
<br />
<br />
<br />
<label for="extratypes">extra TYPES</label>

<select name="types">
  <option *ngFor="let ex of extratypes">{{ex}}</option>
</select>
<br />
<br />
<br />
<label for="results">RESULTS</label>

<select name="results">
  <option *ngFor="let r of results">{{r.color}}</option>
</select>

示例 TS 文件：

import { Component, VERSION } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  backendResponse = [
    { type: "ex1", color: "red", extratype: "x" },
    { type: "ex1", color: "yellow", extratype: "x" },
    { type: "ex1", color: "blue", extratype: "f" },
    { type: "ex1", color: "orange", extratype: "f" },
    { type: "ex2", color: "gray", extratype: "r" },
    { type: "ex2", color: "pink", extratype: "r" },
    { type: "ex2", color: "purlple", extratype: "v" },
    { type: "ex2", color: "green", extratype: "v" }
  ];

  results: any[] = [];

  types = ["ex1"];

  extratypes = ["f"];

  ngOnInit() {
    this.results = this.filterCode(this.backendResponse);
    this.results.filter(x => {
      x.type === this.types && x.extratypes == this.extratypes;
    });
    this.onchanging();
  }

  filterCode(res) {
    let filtered: any[] = [];
    res.forEach(val => {
      filtered.push(val);
    });
    return filtered;
  }

  onchanging() {
    let filterCondition = {
      extratype: this.extratypes[0],
      types: this.types[0]
    };
    console.log(filterCondition);
    this.results = this.backendResponse.filter(
      obj =>
        obj.extratype == filterCondition.extratype &&
        obj.type == filterCondition.types
    );
    console.log(this.results);
  }
}

angular 数组对象 select 特定元素

angular array object select specific elements

arrays

object

options

angular