在没有内置方法的情况下实现排队和取消排队

Question

我有两个函数，一个分别将用户输入的项目从/到数组排队。

我对队列的了解

我对队列的了解非常有限，我知道它们类似于堆栈，但不是后进先出 (LIFO(，而是堆栈，它们是先进先出 (FIFO(，所以基本上任何元素首先进入数组将首先从数组中取出。

我现在正在尝试什么

我现在要做的是使用Enqueue按钮将项目添加到数组中，同时在每次按下按钮时将变量计数增加 1，以便将每个新用户输入添加到下一个数组位置。在取消排队函数中，我通过递增dequeueCount变量将dequeue数组的每个元素设置为等于原始数组的每个元素。

问题是什么这里的问题是，当我按下取消排队按钮时，我基本上需要重新索引所有内容，以便在我取消索引 1 处的元素的队列后，现在占据位置索引 0，基本上我总是想在元素 0 处取消排队。

queue.component.ts

import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'app-queue',
templateUrl: './queue.component.html',
styleUrls: ['./queue.component.css']
})
export class QueueComponent implements OnInit {
@Input() userInput: String 
array = []
arrayCount = 0
dequeueCount = 0
dequeueArray = []
dequeued = null
constructor() { }
ngOnInit() {
}
enQ() {
this.array[this.arrayCount++] = this.userInput;
}
deQ() {
deQ() {
if (this.arrayCount > 0) {
this.dequeueArray[this.dequeueCount++] = this.array[this.dequeueCount-1]
this.dequeued = this.dequeueArray[this.dequeueCount-1]
this.arrayCount--
}
else {
this.dequeued = "There is nothing else to dequeue"
}
}
}

我试图在这里显示数组的当前值

<div>
<label for="userInput">Input to Array:
<input [(ngModel)]="userInput" type="text">
</label><br>
<button (click)="enQ()">Enqueue</button>
<button (click)="deQ()">Dequeue</button>
<h3>Arrays</h3>
<p *ngFor = "let item of array"> {{ array }} </p>
<h3>Dequeued Item</h3>
<p> {{ dequeued}} </p>
</div>

当我按下 enqueue 函数时，一切似乎都正常工作，并且在正确的位置将一个值添加到数组中，因此 enqueue 函数没有问题，但是使用取消排队功能，我需要以某种方式能够取消排队项目并从数组中删除第一个项目并重新显示{{ array }}删除取消排队的项目。

Answer 1

尝试代码段，它应该可以解决问题。

import { Component } from "@angular/core";
@Component({
selector: "my-app",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]  
})
export class AppComponent {
userInput: String;
array = [];
dequeued = [];
enQ() {
this.array.push(this.userInput);
}
deQ() {
if (this.array.length > 0) {
this.dequeued.push(this.array[this.array.length - 1]);
this.array.shift();
}
}
}

<div>
<label for="userInput">Input to Array:
<input [(ngModel)]="userInput" type="text">
</label><br>
<button (click)="enQ()">Enqueue</button>
<button (click)="deQ()">Dequeue</button>
<h3>Arrays</h3>
<p> {{ array |json}} </p>
<h3>Dequeued Item</h3>
<p> {{ dequeued|json}} </p>
</div>

在您的代码中，您缺少dequeue变量上的pipe，因此当它保存数组时，值将不会通过角度呈现

演示

Answer 2

我认为您的方法复杂而模糊，我根据您的意图制作了一个新的方法。

即使这段代码不符合你的需求，至少你可以从这段代码开始。

queue.component.ts

import { Component, Input } from "@angular/core";
@Component({
selector: "my-app",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
@Input() userInput;
array = [];
arrayCount = 0;
dequeuedCount = 0;
dequeued;
get queue() {
const q = [];
for (let i = this.dequeuedCount; i < this.arrayCount; i++) {
q[i - this.dequeuedCount] = this.array[i];
}
return q;
}
enQ() {
this.array[this.arrayCount++] = this.userInput;
}
deQ() {
if (this.arrayCount > this.dequeuedCount) {
this.dequeued = this.array[this.dequeuedCount++];
} else {
this.dequeued = "There is nothing else to dequeue";
}
}
}

队列组件.html

<div>
<label for="userInput">Input to Array:
<input [(ngModel)]="userInput" type="text">
</label><br>
<button (click)="enQ()">Enqueue</button>
<button (click)="deQ()">Dequeue</button>
<h3>Arrays</h3>
<p> {{ queue | json }} </p>
<h3>Dequeued Item</h3>
<p> {{ dequeued | json }} </p>
</div>

堆栈闪电战：https://stackblitz.com/edit/angular-bt8ufd