html - 在 Angular 2 中，当我单击一个 div 并在跨度/p 已满时更改上面的文本时如何填充跨度？

Question

我是这个社区的新人，我有基本的英语，但我希望能让我理解。我刚开始学习 Angular 2，我的问题是:

我创建了一个键盘，上面有 4 个跨度，每个跨度都必须包含一个将在键盘上单击的数字。每次按下其中一个键(每个键都是一个 div)时，我希望该数字显示在这些范围之一中，但我不知道该怎么做。同样在按下 4 个数字(然后填充跨度)后，我希望跨度上方的文本更改为另一个。

HTML:

<div class="container-fluid fixed-heading">
   <div class="back-button">
     <img src="/assets/images/icon_arrow_left.png" (click)="back()" />
   </div>
   <app-main-app-header [heading]="'SETTINGS.SECURITY.PIN.HEADING'">{{"SETTINGS.SECURITY.PIN.HEADING"|translate}}</app-main-app-header>
</div>

<div class="container-fluid component">

  <div class="row pin text-center">

    <div>
      <span>Here I would like to have the text</span>
    </div>

    <div class="container-fluid">
      <div class="col-xs-3">
        <span></span>
        <div class="line"></div>
      </div>
      <div class="col-xs-3">
        <span></span>
        <div class="line"></div>
      </div>
      <div class="col-xs-3">
        <span></span>
        <div class="line"></div>
      </div>
      <div class="col-xs-3">
        <span></span>
        <div class="line"></div>
      </div>
    </div>

  </div>

  <div class="row text-center">
    <div class="col-xs-4 cursor-pointer">
      <span>1</span>
      <p>&nbsp;</p>
    </div>
    <div class="col-xs-4 cursor-pointer">
      <span>2</span>
      <p>ABC</p>
    </div>
    <div class="col-xs-4 no-border-right cursor-pointer">
      <span>3</span>
      <p>DEF</p>
    </div>
  </div>

  <div class="row text-center">
    <div class="col-xs-4 cursor-pointer">
      <span>4</span>
      <p>GHI</p>
    </div>
    <div class="col-xs-4 cursor-pointer">
      <span>5</span>
      <p>JKL</p>
    </div>
    <div class="col-xs-4 no-border-right cursor-pointer">
      <span>6</span>
      <p>MNO</p>
    </div>
  </div>

  <div class="row text-center">
    <div class="col-xs-4 cursor-pointer">
      <span>7</span>
      <p>PQRS</p>
    </div>
    <div class="col-xs-4 cursor-pointer">
      <span>8</span>
      <p>TUV</p>
    </div>
    <div class="col-xs-4 no-border-right cursor-pointer">
      <span>9</span>
      <p>WXYZ</p>
    </div>
  </div>

  <div class="row text-center" id="no-border">
    <div class="col-xs-4 bg-color cursor-pointer">
      <span>&emsp;&ensp;&ensp;.</span>
    </div>
    <div class="col-xs-4 cursor-pointer">
      <span>0</span>
    </div>
     <div class="col-xs-4 no-border-right bg-color cursor-pointer">
      <span class="glyphicon glyphicon-remove-sign"></span>
    </div>
  </div>

</div>

CSS:

.fixed-heading{
  left: 0;           /* Left edge at left for now */
  right: 0;          /* Right edge at right for now, so full width */
  margin: auto;
  max-width: 375px;
  position: fixed;
  width: 100%;
  z-index: 25;
  border-bottom: 1px inset seashell;
}

.back-button{
  cursor:pointer;
  position: absolute;
  top: 9px;
}

.pin{
  background-color: #f2f2f2;
  height: 300px;
}

.row{
  border-bottom: 1px inset;
  padding-bottom: -2px;
  font-size: xx-large;
}

.row.pin{
  border-bottom: none;
  border-right: none;
  font-size: small;
  padding: 80px;
}

p{
  font-size: small;
  margin-top: -8px;
}

.col-xs-4{
  border-right: 1px inset;
}

#no-border{
  border-bottom: none;
}

.no-border-right{
  border-right: none;
}

.bg-color{
  background-color: #f2f2f2;
}

.line{
  border: 2px solid grey;
  width: 25px;
}

.row.pin span{
  margin-left: 8px;
}

.glyphicon.glyphicon-remove-sign{
  margin-top: 5px;
}

我正在使用 Bootstrap 3.3.7 和 Angular 4.2.2。

Answer 1

如果我没理解错的话，您想创建类似 PIN 码输入的内容。如果那是正确的，我认为最好的方法是使用键盘输入，并利用描述的 Angular 内置功能 here .

但是，要回答您的问题，一种方法如下:

// In your component

public textThatChanges = 'previous text';
public input: string = '';

click(numberClicked: string) {
  if (this.input.length < 4) {
    this.input += numberClicked;
  }
  else if (this.input.length === 4) {
    this.textThatChanges = 'new text';
  }
}

// In the template
<!-- This is the span that changes after 4 clicks -->
<span>{{ textThatChanges }}</span>

<!-- As requested - 4 different elements, each displaying 1 digit -->
<span>{{ input.charAt(0) }}</span>
<span>{{ input.charAt(1) }}</span>
<span>{{ input.charAt(2) }}</span>
<span>{{ input.charAt(3) }}</span>

<!-- Do the following for each of the divs that can be clicked -->
<div (click)="click('1')"><span>1</span></div>
<div (click)="click('2')"><span>2</span></div>