Почему эта функция обновляет значение textarea только один раз, когда оно явно настроено на это каждый раз?

Question

Я создаю приложение для кодирования Vigenere, чтобы научиться использовать Angular.У меня есть следующий компонент и HTML.

Я не понимаю, почему функция кодирования работает один раз, а затем при изменении входов textarea она не хочет больше кодировать, пока я не обновлю страницу снова.

Компонент:

import { Component } from '@angular/core';
import { encode } from 'punycode';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'vigenere-cypher';
  plainText;
  key;
  encodedText;

  counter = 0;
  output = [];
  row = 0;
  column = 0;
  encode() {
    let alphabet = 'abcdefghijklmnopqrstuvwxyz'.split('');

    while(this.counter < this.plainText.length) {
      for(let i = 0; i < this.key.length; i++) {
        this.row = alphabet.indexOf(this.key[i]);
        this.column = alphabet.indexOf(this.plainText[this.counter]);
        this.output.push(alphabet[(this.row + this.column) % alphabet.length]);
        this.counter++;
        if (this.counter >= this.plainText.length) break;
      }
    }
    this.encodedText = this.output.join('');

  }
}

HTML:

<p class="lead">
            <a (click)="encode()" class="btn btn-primary btn-lg" href="#" role="button">Encode</a>
          </p>

      <div class="container">
        <div class="row">
          <div class="col-sm">
            <textarea [(ngModel)]="plainText" name=""  id="plainText" cols="30" rows="10"></textarea>
          </div>
          <div class="col-sm">
            <textarea [(ngModel)]="key" name=""  id="key" cols="30" rows="10"></textarea>
          </div>
          <div class="col-sm">
            <textarea [(ngModel)]="encodedText" name="" id="encodedText"  cols="30" rows="10"></textarea>
          </div>
        </div>
      </div>

Что я пробовал

Установка консоли.Лог оператора внутри кодирования, чтобы увидеть, выполняется ли функция каждый раз.

Answer 1

Функция кодирования выполняется каждый раз, но условие while не выполняется, поскольку в переменной count сохранено значение первого выполнения.

Попробуйте сбросить переменную счетчика:

encode() {
    this.counter = 0;
    let alphabet = 'abcdefghijklmnopqrstuvwxyz'.split('');

    while (this.counter < this.plainText.length) {
      for (let i = 0; i < this.key.length; i++) {
        this.row = alphabet.indexOf(this.key[i]);
        this.column = alphabet.indexOf(this.plainText[this.counter]);
        this.output.push(alphabet[(this.row + this.column) % alphabet.length]);
        this.counter++;
        if (this.counter >= this.plainText.length) break;
      }
    }
    this.encodedText = this.output.join('');
}

Привет

Answer 2

Вам необходимо сбросить счетчик внутри функции кодирования.В противном случае сначала он сохранит свое значение после первой операции кодирования.

Я думаю, что лучше иметь локальную переменную-счетчик внутри вашего метода кодирования, поскольку она вам больше не нужна.