我们需要增加stage属性值，直到前向单击时任务数组中的和对象中的stage长度数组值

Question

//这是我的html文件

创建任务

<div class="mt-50 layout-row">
<div class="card outlined ml-20 mt-0" *ngFor="let tasks of stagesTasks;index as i;">
<div class="card-text">
<h4>{{this.stagesNames[i]}}</h4>
<ul class="styled mt-50" [attr.data-test-id]="'stage-'+ i">
<li *ngFor="let task of tasks; index as index;">
<div class="li-content layout-row justify-content-between align-items-center">
<span [attr.data-test-id]="generateTestId(task.name)+ '-name'">{{task.name}}</span>
<div class="icons">
<button class="icon-only x-small mx-2"
[attr.data-test-id]="generateTestId(task.name)+ '-back'">
<i class="material-icons">arrow_back</i>
</button>
<button class="icon-only x-small mx-2"
[attr.data-test-id]="generateTestId(task.name)+ '-forward'" (click)="changeTaskState(task)">
<i class="material-icons">arrow_forward</i>
</button>
<button class="icon-only danger x-small mx-2"
[attr.data-test-id]="generateTestId(task.name)+ '-delete'">
<i class="material-icons">delete</i>
</button>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>

我们需要增加stage属性值，直到前向单击时任务数组中的和对象中的stage长度数组值。我已经使用索引值进行了增量，但没有成功从"@angular/compiler/src/render3/view/template"导入｛renderFlagCheckIfStmt｝；从"@angular/core"导入｛Component，OnInit｝；

@Component({
selector: 'kanban-board',
templateUrl: './kanbanBoard.component.html',
styleUrls: ['./kanbanBoard.component.scss']
})
export class KanbanBoard implements OnInit {
tasks: Task[];
stagesNames: string[];
stagesTasks: any[]; //Only used for rendering purpose
taskInput: string;
taskname: string;
ngOnInit() {
// Each task is uniquely identified by its name. 
// Therefore, when you perform any operation on tasks, make sure you pick tasks by names 
(primary key) instead of any kind of index or any other attribute.
this.tasks = [
// { name: '0', stage: 0 },
// { name: '1', stage: 0 },
//{ name: this.taskInput, stage: 0 },
];
this.stagesNames = ['Backlog', 'To Do', 'Ongoing', 'Done'];
this.configureTasksForRendering();
}
// this function has to be called whenever tasks array is changed to construct stagesTasks 
for rendering purpose
configureTasksForRendering = () => {
this.stagesTasks = [];
for (let i = 0; i < this.stagesNames.length; ++i) {
this.stagesTasks.push([]);
}
for (let task of this.tasks) {
const stageId = task.stage;
this.stagesTasks[stageId].push(task);
}
}
// Read input value on button click(create task button)
getTaskName() {
console.log("new task created", this.taskInput);
const taskname = this.taskInput;
console.log(taskname);
let task: any = { name: taskname, stage: 0 };
this.tasks.push(task);
// console.log(this.tasks);
this.configureTasksForRendering();
this.taskInput = "";
//  for (let name of this.tasks) {
//   const taskname = name.name;
//   this.stagesTasks[taskname].push(name);
// }
}
changeTaskState(i) {
//console.log("forward works")
// console.log(index);
// console.log(this.tasks[index].stage);
//this.tasks[index].stage++;
// console.log(this.tasks[index].stage);
// console.log(index);
// console.log(this.stagesTasks);
console.log(i);
console.log(i.stage);

//this.tasks[i].stage++;
//this.generateTestId(i)
this.configureTasksForRendering();
// for (let i = 0; i < this.tasks.length; ++i) {
// }
// for(let task of this.tasks ){
// }
}

generateTestId = (name) => {
// console.log(name)
//console.log(name.split(' ').join('-'));
return name.split(' ').join('-');
}
}
//task interface
interface Task {
name: string;
stage: number;
}

Answer 1

在你的代码中，我可以看到，你已经对你写增量逻辑的那一行进行了注释，但为了供你参考，我创建了基本的代码片段，https://stackblitz.com/edit/angular-wxquti?file=src%2Fapp%2Fapp.component.ts，src%2App%2App.component.html