我正在构建一个角度/离子格斗游戏的帧数据应用程序，我仍然不熟悉。 每个角色都会有一个电子表格，显示所有动作的属性。
对于大多数列，纯文本很好，但对于“命令”和“级别”列，我希望程序解释我预先设置的字符串并将其更改为图像位置 。
单个容器包含需要更改的多个命令。该数字将引用数字键盘上的方向，而A，B，K和G将引用水平，垂直，踢或保护。 例如：字符串“6 A”应该导致向右侧加载箭头图片 - ＆gt;以及A按钮的图像。
要放入电子表格的值是从相应的.ts文件加载的。 （水平移动的例子）
heroku run rake db:migrate
是否可以执行此操作，同时只将单个字符串作为命令/级别的值，或者将数组的字符串更有意义他们只是一个角色？ 如果后者是真的，我将如何更改数据结构？
这是我当前HTML文件的相关部分：
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: ""}
];
我如何才能在电子表格中显示相关图片而不仅仅是纯文字？
答案 0 :(得分：0)
我找到了原始问题的解决方案，但是我很确定必须有更好的方法来解决这个问题，如果有人发布另一个答案，我会很高兴，说明这些。
我将命令中所有超过一个字母的命令更改为单个字母： FC（完全克劳奇）=＆gt; C，WR（虽然上升）=＆gt; W，BT（Back Turn）=＆gt;在我的阵列中等等。
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语句中，一切都会变得混乱。
