нажатие углового # маркера ссылки в массиве, приводящее к ошибке «Не удается прочитать свойство 'значение' из неопределенного" - PullRequest
Новая
       6

нажатие углового # маркера ссылки в массиве, приводящее к ошибке «Не удается прочитать свойство 'значение' из неопределенного"

0 голосов
/ 23 сентября 2019

Я пытаюсь создать цифровую клавиатуру, получая значения от кнопки, используя ссылку #.Я получаю ожидаемые результаты, но в журнале консоли я получаю сообщение об ошибке типа «ОШИБКА TypeError: Невозможно прочитать свойство« значение »из неопределенного».Я беру пустой массив и выдвигаю индивидуальное числовое значение через функцию щелчка на каждой кнопке в нем.спасибо за проверку моего кода.спасибо за проверку моего кода. спасибо за проверку моего кода.Уже спасибо за проверку моего кода.

HTML-код 


 <div class="mainblock">

    <div class="row">
      <div class="col-5">
        <div class="keypad">
          <div class="keyborder"></div>
          <div class="keyrow">
            <button type="button" #on (click)='numb(on)' value="1" >1</button>
            <button type="button" #tw (click)='numb(tw)' value="2">2</button>
            <button type="button" #thre (click)='numb(thre)' value="3">3</button>
            <button type="button" #has (click)='numb(has)' value="#">#</button>
          </div>
          <div class="keyrow">
            <button type="button" #fou (click)='numb(fou)' value="4">4</button>
            <button type="button" #fiv (click)='numb(fiv)' value="5">5</button>
            <button type="button" #si (click)='numb(si)' value="6">6</button>
            <button type="button" #plu (click)='numb(plu)' value="+">+</button>
          </div>
          <div class="keyrow">
            <button type="button" #seve (click)='numb(seve)'  value="7">7</button>
            <button type="button" #eigh (click)='numb(eigh)' value="8">8</button>
            <button type="button" #nin (click)='numb(nin)' value="9">9</button>
            <button type="button" (click)='back()'>
              <i class="material-icons">backspace</i>
            </button>
          </div>
          <div class="keyrow">
            <button type="button" #dot (click)='numb(dot)' value=".">.</button>
            <button type="button" #zer (click)='numb(zer)'  value="0">0</button>
            <button type="button"  >ln</button>
            <button type="button" >
              <i class="material-icons"> subdirectory_arrow_right</i>
            </button>
          </div>
        </div>
      </div>
      <div class="col-7">
        <div class="phonedisplay">
          <div class="numblock">
            <span>Enter your Phone Number</span>
            <div class="numb" >
              <span *ngFor='let num of thread' class="shownum" >{{num}}</span>
              <span class="ok" [routerLink]="['/username']">
                <i class="material-icons">
                  done
                </i>
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>

машинописный код 


  numb(on, tw, thre, fou, fiv, si, seve, eigh, nin, zer, plu, dot, has){
    this.thread.push(on.value);
    this.thread.push(tw.value);
    this.thread.push(thre.value);
    this.thread.push(fou.value);
    this.thread.push(fiv.value);
    this.thread.push(si.value);
    this.thread.push(seve.value);
    this.thread.push(eigh.value);
    this.thread.push(nin.value);
    this.thread.push(zer.value);
    this.thread.push(plu.value);
    this.thread.push(dot.value);
    this.thread.push(has.value);
  }
  back() {
    this.thread.pop();
  }

1 Ответ

1 голос
/ 23 сентября 2019

Вы всегда вызываете свой метод numb с одним аргументом: первый определен, а следующие нет;следовательно ошибка undefined.Вы должны изменить свой метод следующим образом: 

numb(button) {
  this.thread.push(button.value);
}

Вы также можете напрямую вызывать свой метод с правильным значением вместо передачи параметром value, чтобы избежать синтаксиса #: 

<button type="button" (click)='numb(1)'>1</button>

numb(value) {
  this.thread.push(value);
}
...