Как заменить заполнители значениями, поступающими из массива в Angular 6

#angular

Вопрос:

У меня есть текст, поступающий из jSON, как показано ниже. Я хотел бы заменить [currency: a] на USD и [currency: b] на 50 миллионов и так далее. Пожалуйста, обратите внимание, что это должно быть динамическим, я имею в виду, что заполнители могут увеличиваться. Кто-нибудь может помочь, как это сделать в Angular 6.

 {
"Text":"Not to exceed [currency:a][amount:b] in respect of General Aviation liability primary lines </li><li>not to exceed [currency:c][amount:d] in respect of Airline Liability,[currency:e][amount:f]"
"placeHolderValues": {
    "a": " 'USD'",
    "b": " '50M'",
    "c": " 'GBP'",
    "d": " '100M'",
    "e": " 'HKD'",
    "f": " '150M'",
     } 
}

Ответ №1:

Вероятно, вам следует использовать pipe , который принимает переменные и возвращает всю строку, что-то вроде:

 transform(currencies: string[], amounts: number[]): string {
  return `not to exceed ${currencies[0]}${amounts[0]} in respect of Airline Liability,${currencies[1]}${amounts[1]}`;
}

Вы должны быть в состоянии сделать его общим, чтобы он принимал больше значений и больше строк для замены, просто добавьте больше параметров.

Затем в вашем шаблоне вы можете использовать канал, подобный:

 <input type="text" [placeholder]="'base string' | addCurrencies" />

1. Спасибо за ответ. это не входные данные. Мне нужно отобразить это в пользовательском интерфейсе. конечный результат должен быть похож

2. Спасибо за ответ. Мои выходные данные должны быть такими, как показано ниже, не превышать 50 миллионов долларов США в отношении основных строк ответственности авиации общего назначения </li><li> не превышать 100 миллионов фунтов стерлингов в отношении ответственности авиакомпании, 150 миллионов гонконгских долларов. Можете ли вы сообщить мне, как мы можем заменить их во время рендеринга.

Ответ №2:

Создайте средство получения и привяжите его к [placeholder] . Это сработало бы.

 get text() {
  const currency = this.currency.placeHolderValues
  return `Not to exceed ${currency.a}${currency.b} in respect of General Aviation liability primary lines not to exceed ${currency.c}${currency.d} in respect of Airline Liability,${currency.e}${currency.f}`
}

 <input [placeholder]="text" style="width: 100%">

stackblitz:https://stackblitz.com/edit/angular-x8u8bm

1. Спасибо за ответ. Мои выходные данные должны быть такими, как показано ниже, не превышать 50 миллионов долларов США в отношении основных строк ответственности авиации общего назначения </li><li> не превышать 100 миллионов фунтов стерлингов в отношении ответственности авиакомпании, 150 миллионов гонконгских долларов. Можете ли вы сообщить мне, как мы можем заменить их во время рендеринга.

2. Это можно было бы сделать с помощью getter. Я обновил stackblitz.

3. Привет, я не смог увидеть никаких обновлений в stackbliz .. Не могли бы вы, пожалуйста, поделиться последними. Как уже упоминалось, текст должен быть отображен с замененными значениями. Спасибо за помощь

4. Забыл сохранить это. Обновлено снова.

5. спасибо за обновление, теперь я его вижу. Здесь, в получателе, нам нужно записать всю строку целиком. Для меня текст будет динамическим, и я никогда не знаю, какой текст появится. ИТАК, мне нужно иметь функцию, которая принимает Text и placeHolderValues в качестве входных данных и возвращает строку с правильными значениями. Спасибо за помощь.