Angular 6 - *ngFor: добавление опции выбора в данные JSON

ProgramBox

Angular 6 — *ngFor: добавление опции выбора в данные JSON

Post author:admin
Запись опубликована:18 мая, 2023
Post category:Вопросы по программированию

#javascript #angular #ngfor

Вопрос:

Я не уверен в глубине моего вопроса. Я даже не уверен, возможен ли мой запрос или нет.

пожалуйста, проверьте этот StackBlitz.

чего я пытаюсь добиться, так это того, что есть ключ с именем ‘description’ с некоторым абзацем.

В той же структуре объекта есть значения для опции выбора.

Я просто хочу привязать опции выбора к значению описания.

 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 (), а затем заменить его в выпадающем списке.

К сожалению, я не смог понять, как ее запустить.

Помощь очень ценится.

Спасибо

1. это то, чего ты хочешь? stackblitz.com/edit/angular-v6wyzj?file=src/app /…

2. нет, братан .. на самом деле хочу добавить опцию выбора в сам текст описания. кроме опции выбора, другой текст редактировать запрещено.

Ответ №1:

Сначала вы должны добавить измененную функцию события, чтобы реагировать на выпадающий список, добавив (change)=»yourFunc» к вашему выбору. (в HTML)

Во-вторых, внутри этой функции, которая находится в вашем компоненте, вы перебираете данные и заменяете значение.

Вот ваш обновленный пример, я сделал это только для CurrentCurrency, я думаю, вы поняли идею.

1. это слишком близко, чувак. значение не меняется, как только я переключаюсь с GDB на USD и наоборот, а также. я не хочу выделять отдельно. мне нужно использовать опцию выбора в самом описании. вот о чем мой запрос. (прошу прощения за мой запутанный вопрос)

2. Я только что исправил stackblitz, теперь он изменяет все вхождения, а также переключается с GDB на USD взад и вперед. Но я не понимаю, что вы имеете в виду, говоря «я не хочу выделять отдельно. Мне нужно использовать опцию выбора в самом описании «. Вы хотите выпадающий список посреди этого текста в описании? Например, «Этот DummyLoream Ipsum из [выпадающего списка для currency] [выпадающего списка для maxRate]»

3. да, именно так. вот в чем моя проблема, и я не знаю, возможно ли это: (

4. Насколько я знаю, это невозможно просто так. Вы можете отображать html из переменной, но вы не можете привязываться к ней. Таким образом, вы могли бы отобразить HTML-тег select, но вы не можете привязаться к выбранному значению этого html-тега select. Однако вы могли бы разбить описание на несколько текстовых фрагментов, а затем *ngFor поверх фрагментов, а затем добавить html-тег select.

5. именно с этим я консультируюсь со своей командой. но нет готовой структуры api для изменения.. но в любом случае. ты такой потрясающий человек. спасибо за вашу помощь

Ответ №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);
      }
    }

1. на самом деле это фиктивные данные только для примера использования. но в реальном случае я получаю данные из API. поэтому я не могу изменить структуру.

2. пожалуйста, посмотрите решение Джереми выше, он почти откликнулся на мой запрос

Ответ №3:

импортируйте { 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>