【发布时间】：2018-10-30 02:29:27
【问题描述】：
我正在为我仍然不太熟悉的 angular/ionic 格斗游戏构建框架数据应用程序。 每个角色都会有一个电子表格，显示他们所有动作的属性。
对于大多数列纯文本都可以，但对于“命令”和“级别”列，我希望程序能够解释我预先设置的字符串并将它们更改为 图像位置 .
单个容器由需要更改的多个命令组成。数字将参考数字键盘上的方向，而 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>
我需要如何在电子表格上显示相关图片，而不仅仅是纯文本？
【问题讨论】：
-
你能发布你的 char 到图像路径之间的映射吗？
-
@yanis-git 映射为文件位置和命名约定？所有图像都在“assets/imgs/input/”中，并命名为 A、B、G 或从 1 到 9 的数字。我认为通过为包含命令字符串的 div 提供一个特定类，然后我可以在 Dom 中找到它，我认为我已经更接近解决方案了。这样我就设法用所需的图片交换了部分字符串。但是，我仍然不太确定如何逐个字符地完全实现此功能。
-
对不起，我的意思是，命令 A 是这张图片，命令 WR A 是这张图片......我担心不明白你到目前为止试图实现的目标
-
@yanis-git 对不起，我不够清楚，感谢您的支持。例如，字符串“6A”应该获取 2 张图片。图片“assets/imgs/input/6.png”和图片“assets/imgs/input/A.png”并显示在“命令”栏中。 WR 代表“While rise”，BT 代表“Back turn”，但似乎我必须想出自己的命名约定并将其保留为一个字符。我现在已经非常接近解决方案了。稍后我会发布它以询问是否可以改进。
标签： angular dom ionic-framework