Angular 6 - * ngFor：在JSON数据中附加选择选项

Question

我不确定我的问题的深度。我甚至不确定我的要求是否可行。

请检查this stackBlitz。

我想要实现的是，有一个称为“描述”的键，带有一些段落。

在相同的对象结构中，有选择选项的值。

我只想在描述值上绑定选择选项。

description: "This DummyLoream Ipsum from [currencyType - drop down should come here] [maxRate - drop down should come here] to [currencyType - drop down should come here] [maxRate - drop down should come here] (Loream Ipsum Loream Ipsum Loream Ipsum and Loream Ipsum) and Loream Ipsum-Loream Ipsum Loream Ipsum must be within the Ipsum Loream Ipsum Loream Ipsum Loream, Ipsum Loream Ipsum Loream.All Ipsum Loream.",

dropDownKeysValues: [
        {
          currencyType: "GBP",
          maxRate: "100M"
        },
        {
          currencyType: "USD",
          maxRate: "200M"
        }
      ],   

这真的有可能吗？

我的想法是循环遍历对象并获取indexOf（）所需的值，然后在下拉列表中替换它。

不幸的是，我无法如何启动它。

非常感谢。

谢谢

Answer 1

首先，您必须添加一个已更改的事件函数，以便通过向您的选择添加（更改）=“​​yourFunc”来对下拉列表做出反应。 （在HTML中）

其次，在组件中的该函数内部，循环遍历数据并替换值。

这是你更新的example我只为CurrentCurrency做过，我想你明白了。

Answer 2

你不需要selectedValue。您可以直接绑定到该对象。

<div class="form-group" contenteditable="false" *ngFor="let val of mockData">
  <p>{{val.description}}</p>

  <label for="sort" class="col-sm-2 control-label"> select current type </label>

  <div class="col-sm-4">
    <select [(ngModel)]="mockData[0].currencyType" (change)="logMockData()"> 
      <option *ngFor='let item of dropDownKeysValues' [value]="item.currencyType">
        {{ item.currencyType }}
      </option>
    </select>
  </div>

  <label for="sort" class="col-sm-2 control-label"> select max rate </label>
  <div class="col-sm-4">
    <select [(ngModel)]="mockData[0].maxRate" (change)="logMockData()"> 
      <option *ngFor='let item of dropDownKeysValues' [value]="item.maxRate">
        {{item.maxRate}}
      </option>
    </select>
  </div>
</div>

和

    import { Component } from '@angular/core';

    @Component({
      selector: 'my-app',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent {
      name = 'Angular';

      dropDownKeysValues: any = [
            {
              currencyType: "GBP",
              maxRate: "100M"
            },
            {
              currencyType: "USD",
              maxRate: "200M"
            }
          ];

      public mockData: any = [
        {
          id: "{82c6d787-183d-4928-8e67-5ba17dbb0b8b-clni-icm-eo}-{1}",

          createdDate: "12/12/2018",
          createdBy: "Lorieam Ipsum",
          modifiedDate: "",
          modifiedBy: "Ipsum",
          textId: "{pp-ghtter34-5542-998c-12of-gsdfg435as3456nhhc-nopsee}-{1}",
          baseDataid: "{123mkjdfla-234ll234nkjbnjk-234-oop3}-{1}",
          sectionView: {
            id: "{0s0M3-r1And0M-Dat23234}-{1}",
            title: "Lorieam Ispam",
            description: "",
            order: "5"
          },
          title: "This Dummy, Loream Ipsum and Loream Ipsum",
          description: "This DummyLoream Ipsum from [currencyType] [maxRate] to [currencyType] [maxRate] (Loream Ipsum Loream Ipsum Loream Ipsum and Loream Ipsum) and Loream Ipsum-Loream Ipsum Loream Ipsum must be within the Ipsum Loream Ipsum Loream Ipsum Loream, Ipsum Loream Ipsum Loream.All Ipsum Loream.",
          currencyType: "",
          maxRate: "" 
        }


];

      constructor() { }

      logMockData() {
        console.log(this.mockData);
      }
    }

Answer 3

从'@ angular / core'导入{Component};

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular';
  public mockData: any = [
    {
      id: "{82c6d787-183d-4928-8e67-5ba17dbb0b8b-clni-icm-eo}-{1}",

      createdDate: "12/12/2018",
      createdBy: "Lorieam Ipsum",
      modifiedDate: "",
      modifiedBy: "Ipsum",
      textId: "{pp-ghtter34-5542-998c-12of-gsdfg435as3456nhhc-nopsee}-{1}",
      baseDataid: "{123mkjdfla-234ll234nkjbnjk-234-oop3}-{1}",
      sectionView: {
        id: "{0s0M3-r1And0M-Dat23234}-{1}",
        title: "Lorieam Ispam",
        description: "",
        order: "5"
      },
      title: "This Dummy, Loream Ipsum and Loream Ipsum",
      description: "This DummyLoream Ipsum from [currencyType] [maxRate] to [currencyType] [maxRate] (Loream Ipsum Loream Ipsum Loream Ipsum and Loream Ipsum) and Loream Ipsum-Loream Ipsum Loream Ipsum must be within the Ipsum Loream Ipsum Loream Ipsum Loream, Ipsum Loream Ipsum Loream.All Ipsum Loream.",
     selectedType: 'GBP',
     selectedcurrency: '100M',
      dropDownKeysValues: [
        {
          currencyType: "GBP",
          maxRate: "100M"
        },
        {
          currencyType: "USD",
          maxRate: "200M"
        }
          ],      
        }
      ];
      selectedValue = 0;
      selectedValue1 = 0;
      public dropDownString;
      public currencyValue;
      constructor() {
       for (var i = 0 ;i<this.mockData.length;i++){     
          this.dropDownString = this.mockData[i].dropDownKeysValues; 
          this.currencyValue = this.mockData[i].dropDownKeysValues;             
        }  
      }
    }



    <div class="form-group" contenteditable="false" *ngFor="let val of mockData">   <p>{{val.description}}</p> <label for="sort" class="col-sm-2 control-label"> select current type </label> <div class="col-sm-4"> <select [(ngModel)]="mockData.selectedType">  <option *ngFor='let d of dropDownString' [value]="d.currencyType"> {{d.currencyType}} </option> </select> </div>


    <label for="sort" class="col-sm-2 control-label"> select max rate </label> <div class="col-sm-4"> <select [(ngModel)]="mockData.selectedcurrency">  <option *ngFor='let c of currencyValue' [value]="c.maxRate"> {{c.maxRate}} </option> </select> </div> </div>