如何创建一个递归的n级嵌套任务列表，用户可以在任务中添加子任务，并在UI中正确显示它？ 我想实现一个递归列表结构以支持任意深度的嵌套子标准（n级）？我正在研究待办事项任务列表分配，我想在其中允许用户创建子任务

Question

TS文件

export class AppComponent {
notes: Note[] = [];

addNote(title: string, content: string) {
if (!title.trim() || !content.trim()) return;

this.notes.push({
  id: Date.now(),
  title,
  content,
  subtasks: [],
  });
 }

addSubtask(parent: { subtasks: Subtask[] }, text: string) {
console.log(parent.subtasks);
console.log(text);
if (!text.trim()) return;
console.log(text);
parent.subtasks.push({
  id: Date.now(),
  text,
  completed: false,
  subtasks: [], // Support nested subtasks
});
}

toggleSubtask(subtask: Subtask) {
subtask.completed = !subtask.completed;
}

deleteSubtask(parent: { subtasks: Subtask[] }, subtaskId: number) {
parent.subtasks = parent.subtasks.filter(
  (subtask) => subtask.id !== subtaskId
);
}

deleteNote(id: number) {
this.notes = this.notes.filter((note) => note.id !== id);
}
}

Console

写递归，您可以按照以下过程进行操作。

识别初始模板： 这里将是通过属性运行的for循环，它将显示asubtasks

或

Answer 1

，在下面显示该特定元素的孩子。 where请注意，我们正在传递属性调用

subtask

，这将是a

parent

，

task

或

subtask

这是因为当我们删除时，我们需要父元素将其从

note

array中删除。

要区分任务和子任务i使用属性

subtasks

，您也可以将这两个合并到一个模板中。

我们在模板（递归）中调用样品模板，以便它可以是任何子任务级别。

type现在，我们可以最初使用

    <ng-template #taskListTemplate let-parent="parent" let-type="type">
        <ng-container *ngIf="parent?.subtasks?.length">
            <ul>
                <ng-container *ngFor="let task of parent.subtasks">
                    <li>
                        <ng-container *ngIf="type === 'task'">
                            <ng-container
                                *ngTemplateOutlet="
                                    taskTemplate;
                                    context: { task: task, parent: parent }
                                "
                            ></ng-container>
                        </ng-container>
                        <ng-container *ngIf="type === 'subtask'">
                            <ng-container
                                *ngTemplateOutlet="
                                    subTaskTemplate;
                                    context: { subtask: task, parent: parent }
                                "
                            ></ng-container>
                        </ng-container>

                        <ng-container
                            *ngTemplateOutlet="
                                taskListTemplate;
                                context: { parent: task, type: 'subtask' }
                            "
                        ></ng-container>
                    </li>
                </ng-container>
            </ul>
        </ng-container>
    </ng-template>

作为父。 它将递归创建列表。

note

我们可以将logic和

    <div>
        <input type="text" placeholder="Add Subtask" #subtaskInput />
        <button (click)="addSubtask(note, subtaskInput.value)">+</button>
    </div>
    <ng-container
        *ngTemplateOutlet="taskListTemplate; context: { parent: note, type: 'task' }"
    ></ng-container>

的逻辑分为两个模板，然后从我们的列表模板中调用它们。

tasks

Full代码：

subtasks

stackblitzdemo