Автоматически заменить строку с положением изображения в угловых

Question

Я создаю приложение данных фрейма для файтинга в англ / ионном режиме, с которым я до сих пор не очень знаком.Для каждого персонажа будет электронная таблица, которая отображает свойства всех его ходов.

Пример электронной таблицы

Для большинства столбцов простой текст подходит, но дляВ столбце «команда» и «уровень» я хотел бы, чтобы программа интерпретировала строки, которые я установил заранее, и изменила их на расположение изображения .

Один контейнер состоит из нескольких команд , которые необходимо изменить.Число будет указывать направление на цифровой клавиатуре, в то время как A, B, K и G будут указывать на горизонтальный, вертикальный, удар или защиту.Например: строка «6 A» должна привести к загрузке изображения стрелки вправо -> и изображения кнопки A.

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

export class Sc6mitsurugiPage {

  horMoves = [
    {move : "Twin Splinters", command: "A", level: "H", dmg: "12", grd: "-8", hit: "2", ch: "2", notes: ""},
    {move : "Twin Splinters (C)", command: "A A", level: "H", dmg: "28", grd: "-6", hit: "6", ch: "6", notes: ""},
    {move : "Reaver", command: "6 A", level: "H", dmg: "18", grd: "-2", hit: "8", ch: "8", notes: ""},
    {move : "Splitting Gold", command: "3 A", level: "M", dmg: "22", grd: "-6", hit: "4", ch: "STN", notes: ""},
    {move : "Knee Slice", command: "2 A", level: "SL", dmg: "12", grd: "-6", hit: "8", ch: "8", notes: ""},
    {move : "Shin Slicer", command: "1 A", level: "L", dmg: "38", grd: "-16", hit: "KND", ch: "KND", notes: ""},
    {move : "Shin Slicer Feint", command: "1 A~B", level: "M", dmg: "42", grd: "12", hit: "SLNC", ch: "SLNC", notes: ""},
    {move : "Dawn Breath", command: "4 A", level: "M", dmg: "28", grd: "-4", hit: "4", ch: "4", notes: ""},
    {move : "Dawn Breath ~Mist", command: "4 A 6", level: "H, SS", dmg: "28", grd: "-2", hit: "6", ch: "6", notes: ""},
    {move : "Knee Slice", command: "FC A", level: "SL", dmg: "12", grd: "-6", hit: "8", ch: "8", notes: ""},
    {move : "Silent Slash", command: "WR A", level: "M", dmg: "28", grd: "-7", hit: "5", ch: "5", notes: ""},
    {move : "Field Reave", command: "7 A", level: "H", dmg: "22", grd: "-3", hit: "7", ch: "7", notes: ""},
    {move : "Field Reave", command: "8 A", level: "H", dmg: "24", grd: "-3", hit: "7", ch: "7", notes: ""},
    {move : "Field Reave", command: "9 A", level: "H", dmg: "26", grd: "-3", hit: "7", ch: "7", notes: ""},
    {move : "Reverse Slice", command: "BT A", level: "H", dmg: "14", grd: "-6", hit: "6", ch: "7", notes: ""},
    {move : "Hidden Slice", command: "BT 2 A", level: "SL", dmg: "14", grd: "-6", hit: "8", ch: "8", notes: ""}
  ];

Возможно ли это сделать, имея только одну строку в качестве значения для команды / уровня, или было бы более разумно иметь массив строк со всеми из них только одним символом?Если последнее верно, как мне нужно изменить структуру данных?

Это релевантная часть моего текущего HTML-файла:

<ion-row nowrap *ngFor="let horMove of horMoves">
  <ion-col class="sheetColumn wideCol">
    <div>{{horMove.move}}</div>
  </ion-col>
  <ion-col class="sheetColumn wideCol">
      <div>{{horMove.command}}</div>
  </ion-col>
  <ion-col class="sheetColumn narrowCol">
      <div>{{horMove.level}}</div>
  </ion-col>
  <ion-col class="sheetColumn narrowCol">
      <div>{{horMove.dmg}}</div>
  </ion-col>
  <ion-col class="sheetColumn narrowCol">
      <div>{{horMove.grd}}</div>
  </ion-col>
  <ion-col class="sheetColumn narrowCol">
      <div>{{horMove.hit}}</div>
  </ion-col>
  <ion-col class="sheetColumn narrowCol">
      <div>{{horMove.ch}}</div>
  </ion-col>
  <ion-col class="sheetColumn wideCol">
      <div><img class="inputImg" src="assets/imgs/input/a.png"><img class="inputImg" src="assets/imgs/input/b.png"><img class="inputImg" src="assets/imgs/input/k.png"><img class="inputImg" src="assets/imgs/input/g.png"></div>
  </ion-col>
</ion-row>

Как бы мне понадобилось иметь соответствующие изображения отображаются в таблице вместо простого текста?

Answer 1

Я нашел решение для моей первоначальной проблемы, однако я вполне уверен, что должны быть лучшие способы сделать это, и я был бы рад, если бы кто-то опубликовал другой ответ, заявив их.

Я изменил все команды в команде, которые длиннее одной буквы, на одну букву: FC (полный наклон) => C, WR (при подъеме) => W, BT (обратный поворот) => T и т. Д. В моем массиве.

  horMoves = [
    {move : "Twin Splinters", command: "A", level: "H", dmg: "12", grd: "-8", hit: "2", ch: "2", notes: ""},
    {move : "Twin Splinters (C)", command: "AA", level: "H", dmg: "28", grd: "-6", hit: "6", ch: "6", notes: ""},
    {move : "Reaver", command: "6A", level: "H", dmg: "18", grd: "-2", hit: "8", ch: "8", notes: ""},
    {move : "Splitting Gold", command: "3A", level: "M", dmg: "22", grd: "-6", hit: "4", ch: "STN", notes: ""},
    {move : "Knee Slice", command: "2A", level: "SL", dmg: "12", grd: "-6", hit: "8", ch: "8", notes: ""},
    {move : "Shin Slicer", command: "1A", level: "L", dmg: "38", grd: "-16", hit: "KND", ch: "KND", notes: ""},
    {move : "Shin Slicer Feint", command: "1M", level: "M", dmg: "42", grd: "12", hit: "SLNC", ch: "SLNC", notes: ""},
    {move : "Dawn Breath", command: "4A", level: "M", dmg: "28", grd: "-4", hit: "4", ch: "4", notes: ""},
    {move : "Dawn Breath ~Mist", command: "4A6", level: "H, SS", dmg: "28", grd: "-2", hit: "6", ch: "6", notes: ""},
    {move : "Knee Slice", command: "CA", level: "SL", dmg: "12", grd: "-6", hit: "8", ch: "8", notes: ""},
    {move : "Silent Slash", command: "WA", level: "M", dmg: "28", grd: "-7", hit: "5", ch: "5", notes: ""},
    {move : "Field Reave", command: "7A", level: "H", dmg: "22", grd: "-3", hit: "7", ch: "7", notes: ""},
    {move : "Field Reave", command: "8A", level: "H", dmg: "24", grd: "-3", hit: "7", ch: "7", notes: ""},
    {move : "Field Reave", command: "9A", level: "H", dmg: "26", grd: "-3", hit: "7", ch: "7", notes: ""},
    {move : "Reverse Slice", command: "TA", level: "H", dmg: "14", grd: "-6", hit: "6", ch: "7", notes: ""},
    {move : "Hidden Slice", command: "T2A", level: "SL", dmg: "14", grd: "-6", hit: "8", ch: "8", notes: ""}
  ];

Затем я дал div, который содержит команду, специальный класс, чтобы его можно было найти в DOM.

<ion-col class="sheetColumn wideCol">
  <div class="command">{{horMove.command}}</div>
</ion-col>

После этого я вошел в соответствующий файл .tsи начал манипулировать DOM.Этот код выбирает все узлы, которые имеют класс «command», и я могу затем использовать этот список для перебора каждой буквы и создания нового элемента, который затем будет добавлен в нужное место в DOM.

  ionViewDidLoad() {
    let comArr = document.getElementsByClassName("command"); // Fetches a nodelist with all command cells
    for(let i = 0; i < comArr.length; i++){
      let elString = document.getElementsByClassName("command")[i].innerHTML; // Fetches string for this iteration of the loop
      document.getElementsByClassName("command")[i].innerHTML = ""; // Clears raw text from column
      for(let j = 0; j < elString.length; j++){
        let newImg = document.createElement("img"); // creates new <img>
        newImg.setAttribute("class", "inputImg"); //  sets class for <img>
        let alphaNum = elString[j];

        switch(alphaNum){

          //Diretions
          case "1": //Lower Left
            newImg.setAttribute("src", "assets/imgs/input/1.png");
            break;

          case "2": //Bottom
            newImg.setAttribute("src", "assets/imgs/input/2.png");
            break;

          case "3": //Lower Right
            newImg.setAttribute("src", "assets/imgs/input/3.png");
            break;

          case "4": //Left
            newImg.setAttribute("src", "assets/imgs/input/4.png");
            break;

          case "6": //Right
            newImg.setAttribute("src", "assets/imgs/input/6.png");
            break;

          case "7": //Upper Left
            newImg.setAttribute("src", "assets/imgs/input/7.png");
            break;

          case "8": //Top
            newImg.setAttribute("src", "assets/imgs/input/8.png");
            break;

          case "9": //Upper Right
            newImg.setAttribute("src", "assets/imgs/input/9.png");
            break;

          //Standard Buttons
          case "A": //Horizontal
            newImg.setAttribute("src", "assets/imgs/input/A.png");
            break;

          case "B": //Vertical
            newImg.setAttribute("src", "assets/imgs/input/B.png");
            break;

          case "K": //Kick
            newImg.setAttribute("src", "assets/imgs/input/K.png");
            break;

          case "G": //Guard
            newImg.setAttribute("src", "assets/imgs/input/G.png");
            break;

          //Multi Button
          case "M": // A~B Horizontal ~ Vertical
            newImg.setAttribute("src", "assets/imgs/input/M.png");
            newImg.setAttribute("class", "inputImgWide");
            break;

          case "N": // B~A Vertical ~ Horizontal
            newImg.setAttribute("src", "assets/imgs/input/N.png");
            newImg.setAttribute("class", "inputImgWide");
            break;

          case "O": // K~A Kick ~ Horizontal
            newImg.setAttribute("src", "assets/imgs/input/O.png");
            newImg.setAttribute("class", "inputImgWide");
            break;

          case "P": // K~B Kick ~ Vertical
            newImg.setAttribute("src", "assets/imgs/input/P.png");
            newImg.setAttribute("class", "inputImgWide");
            break;

          // States (Not complete yet)
          case "C": // Full Crouch
            break;

          case "T": // Back Turn
            break;

          case "R": // Run
            break;

          case "W": // While Rising
            break;
        }
        document.getElementsByClassName("command")[i].appendChild(newImg) // appends <img> child to corresponding cell
      }
    }
  }
}

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

Изображение результата