为什么这个 function 每次都明确设置为更新 textarea 值一次？

Question

I am building a Vigenere encoding app to learn how to use Angular. I have the following component and HTML.

I don't understand why the encode function works once and then when changing the textarea inputs, it doesn't want to encode anymore until I refresh the page again.

Component:

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>

What have I tried

Putting a console.log statement inside the encode to see if the function executes each time.

Answer 1

You need to reset your counter inside your encode function. Otherwise first it will retain its value after the first encode operation.

I think its better to have a local counter variable inside your encode method as you dont need it anywhere else.

Answer 2

The encode function is executed each time, but the while condition is not met because the count variable has stored the value of the first execution.

Try reseting counter variable:

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('');
}

Regards