Question

我很难在我的角度4应用程序中显示我的td元素上的更大符号时遇到问题。我需要仅在屏幕截图中显示的位置显示td元素。它在第一次正确显示，但是当我编辑任何最大值时，在该区域中替换具有大于号的td。如何防止这种情况发生。我需要在屏幕截图中看到的位置限制大于号。

我尝试了以下条件，例如。这里我的意思是，如果它不是数组中的最后一个元素

，则不显示大于号

html



<td colspan="2" *ngIf="!item.maxSize && $last"  class="text-right">  &gt;
          <click-input  contenteditable="true">
              <input [(ngModel)]="item.minSize" required min="0" max="999999999999999" numberFormat="shortNumberFormat:.0">
          </click-input>
      </td>

原始主要HTML代码

       <td *ngIf="!!item.maxSize">
        <click-input  contenteditable="true">
            <input [(ngModel)]="item.minSize"  required min="0" max="999999999999999" numberFormat="shortNumberFormat:.0">
        </click-input>
      </td>

      <td *ngIf="!!item.maxSize">
          <click-input  contenteditable="true">
              <input [(ngModel)]="item.maxSize" required min="0" max="999999999999999" numberFormat="shortNumberFormat:.0">
          </click-input>
      </td>  


     <td colspan="2" *ngIf="!item.maxSize"  class="text-right">  &gt;
          <click-input  contenteditable="true">
              <input [(ngModel)]="item.minSize" required min="0" max="999999999999999" numberFormat="shortNumberFormat:.0">
          </click-input>
      </td>     



      <td class="text-right">
        <click-input [classNames]="['percentage']" contenteditable="true">
            <input [(ngModel)]="item.values[0]"  numberFormat="numberPercent:.0-2" required min="0" max="999999999999999">
        </click-input>
      </td>
      <td class="text-right">
          <click-input [classNames]="['percentage']" contenteditable="true">
              <input [(ngModel)]="item.values[1]"  numberFormat="numberPercent:.0-2" required min="0" max="999999999999999">
          </click-input>
      </td>
    </tr>

在创建第一个最大输入字段后，屏幕如下所示

Answer 1

如果需要，我会尝试将其包装在一个范围内并应用CSS类：

<td colspan="2" *ngIf="!item.maxSize"  class="text-right">
   <span>&gt;</span>
   <click-input  contenteditable="true">
      <input [(ngModel)]="item.minSize" required min="0" max="999999999999999" numberFormat="shortNumberFormat:.0">
   </click-input>
</td>

您可能还需要提供更多详细信息。我有点不确定这是不是你想要做的。 “点击输入”组件做了什么（我假设它触发从文本到输入编辑器的状态更改？）

Answer 2

这有点难以辨别，因为现在还不清楚这个标志会消失的原因。

您可以尝试设置“＆gt;”签署CSS作为解决方法（假设{d}中呈现click-input

<强> CSS

click-input.addSign::before
{
    content: ">";
    margin-right: 10px;
}

<强> HTML

<click-input class="addSign"  contenteditable="true">
      <input [(ngModel)]="item.minSize" required min="0" max="999999999999999" numberFormat="shortNumberFormat:.0">
  </click-input>

Answer 3

问题已修复。我用过last = last;

<tr *ngFor="let item of domicileInfo.taxAssesment.items; let last = last;">
            <td *ngIf="!last">
                <click-input contenteditable="true">
                    <input [(ngModel)]="item.minSize"  required min="0" max="999999999999999" numberFormat="shortNumberFormat:.0">
                </click-input>
              </td>

              <td *ngIf="!last">
                  <click-input contenteditable="true">
                      <input [(ngModel)]="item.maxSize" required min="0" max="999999999999999" numberFormat="shortNumberFormat:.0">
                  </click-input>
              </td>  
             <td  colspan="2" *ngIf="last"  class="text-right">  <span>&gt;</span>
                  <click-input contenteditable="true">
                      <input [(ngModel)]="item.minSize" required min="0" max="999999999999999" numberFormat="shortNumberFormat:.0">
                  </click-input>
              </td>     
              <td class="text-right">
                <click-input [classNames]="['percentage']" contenteditable="true">
                    <input [(ngModel)]="item.values[0]"  numberFormat="numberPercent:.0-2" required min="0" max="999999999999999">
                </click-input>
              </td>
              <td class="text-right">
                  <click-input [classNames]="['percentage']" contenteditable="true">
                      <input [(ngModel)]="item.values[1]"  numberFormat="numberPercent:.0-2" required min="0" max="999999999999999">
                  </click-input>
              </td>
            </tr>

无法在角度4的特定位置显示更大的符号

3 个答案: