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

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

请查收

我想要达到的是，有一个叫做“描述”的关键词和一些段落

在同一对象结构中，存在“选择”选项的值

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

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（）所需的值，然后在下拉列表中替换它

不幸的是，我不知道如何开始

非常感谢你的帮助

---

谢谢

从'@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>

@组件({
选择器：“我的应用程序”，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent{
名称='角度'；
公共数据：任意=[
{
id:“{82c6d787-183d-4928-8e67-5ba17dbb0b8b-clni-icm-eo}-{1}”，
创建日期：“2018年12月12日”，
创建人：“Loriam Ipsum”，
修饰日期：“，
修改为：“Ipsum”，
textId:“{pp-ghtter34-5542-998c-12of-gsdfg435as3456nhhc-nopsee}-{1}”，
baseDataid:“{123mkjdfla-234ll234nkjbnjk-234-oop3}-{1}”，
剖面图：{
id:“{0s0M3-r1And0M-Dat23234}-{1}”，
标题：“Loriam Ispam”，
说明：“，
命令：“5”
},
标题：“这个假人，Loream Ipsum和Loream Ipsum”，
描述：“此DummyLoream Ipsum从[currencyType][maxRate]到[currencyType][maxRate]（Loream Ipsum Loream Ipsum和Loream Ipsum）和Loream Ipsum Loream Ipsum Loream Ipsum Loream Ipsum必须在Ipsum Loream Ipsum Loream Ipsum Loream Ipsum Loream Loream Ipsum Loream Loream Ipsum Loream Ipsum Loream Ipsum Loream Loream Lorea，
所选类型：“GBP”，
所选货币：“1亿”，
下拉键值：[
{
货币类型：“英镑”，
最大速率：“100米”
},
{
货币类型：“美元”，
最大速率：“200米”
}
],      
}
];
selectedValue=0；
selectedValue1=0；
公共下拉字符串；
公共货币价值；
构造函数（）{
对于（var i=0；iimport{Component}来自'@angular/core'

@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>

@组件({
选择器：“我的应用程序”，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent{
名称='角度'；
公共数据：任意=[
{
id:“{82c6d787-183d-4928-8e67-5ba17dbb0b8b-clni-icm-eo}-{1}”，
创建日期：“2018年12月12日”，
创建人：“Loriam Ipsum”，
修饰日期：“，
修改为：“Ipsum”，
textId:“{pp-ghtter34-5542-998c-12of-gsdfg435as3456nhhc-nopsee}-{1}”，
baseDataid:“{123mkjdfla-234ll234nkjbnjk-234-oop3}-{1}”，
剖面图：{
id:“{0s0M3-r1And0M-Dat23234}-{1}”，
标题：“Loriam Ispam”，
说明：“，
命令：“5”
},
标题：“这个假人，Loream Ipsum和Loream Ipsum”，
描述：“此DummyLoream Ipsum从[currencyType][maxRate]到[currencyType][maxRate]（Loream Ipsum Loream Ipsum和Loream Ipsum）和Loream Ipsum Loream Ipsum Loream Ipsum Loream Ipsum必须在Ipsum Loream Ipsum Loream Ipsum Loream Ipsum Loream Loream Ipsum Loream Loream Ipsum Loream Ipsum Loream Ipsum Loream Loream Lorea，
所选类型：“GBP”，
所选货币：“1亿”，
下拉键值：[
{
货币类型：“英镑”，
最大速率：“100米”
},
{
货币类型：“美元”，
最大速率：“200米”
}
],      
}
];
selectedValue=0；
selectedValue1=0；
公共下拉字符串；
公共货币价值；
构造函数（）{
对于（var i=0；i首先，您必须添加一个已更改的事件函数，以便对下拉列表作出反应，将（change）=“yourFunc”添加到您的select中。（在HTML中）

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

这是您的更新版，我只是为CurrentCurrency做的，我想您明白了。
首先，您必须添加一个已更改的事件函数，以便对下拉列表做出反应，将（更改）=“yourFunc”添加到您的选择中。（在HTML中）

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

这是您的更新版，我只是为CurrentCurrency做的，我想您明白了。
您不需要选择的值。您可以直接绑定到对象

<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>

您不需要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>

@Sangal Lal我不知道你为什么再次将我的stackblitz代码粘贴到这里。我看不到任何更改。请查看此[（ngModel）]=“mockData.selectedcurrency”@Sangal Lal我不知道你为什么再次将我的stackblitz代码粘贴到这里。我看不到任何更改。请查看此[（ngModel）]=“mockData.selectedcurrency”这太接近了，伙计。一旦我从GDB换成美元，价值就不会改变，反之亦然。我不想单独选择。我需要在描述中使用选择选项。这就是我的要求。（为我的困惑问题道歉）我刚刚纠正了stackblitz，它现在确实改变了所有出现的情况，并且还从GDB来回切换到USD。但是我不明白你所说的“我不想单独选择。我需要在描述中使用选择选项”。你想在描述中的文本中间有一个下拉列表吗？比如“这个Dummyroream Ipsum来自[currency下拉列表][maxRate下拉列表]“是的，没错。这就是我的问题所在，不知道是否可能：（据我所知，这是不可能的。您可以从变量呈现html，但不能绑定到它。因此，您可以显示一个select html标记，但不能绑定到该select html标记的选定值。但是，您可以将描述拆分为多个文本片段，然后在片段上添加*ngFor，然后添加sel。）ect html标签。这正是我与我的团队协商的内容。但没有任何理由