在提問之前,代碼還沒有完成,所以一些方法是空的,*ngIf 指令可能是錯誤的(邏輯方面,而不是語法方面)。但即使沒有它們,我也遇到了同樣的錯誤,所以我現在懶得洗掉它們。
當我單擊任何編輯按鈕或創建按鈕時,我正在遵循一個角度課程并期待這樣的螢屏:
課程版
但是在加載頁面沒有任何錯誤后,如果我單擊任何按鈕(創建或編輯),我會在控制臺上收到此錯誤,經過長時間的嘗試后找不到原因:
我的版本
我在 Stackoverflow 上發現的類似問題主要是由簡單的語法錯誤引起的,但到目前為止我的代碼找不到任何語法問題。也許有人會看到這個問題并糾正我。
您可以在下面找到所有代碼。
這是我的edit-task.component.html
<div *ngIf="task">
<h2 {{ task.taskName }}></h2>
<div>
Task ID:
<input [(ngModel)]="task.taskId" placeholder="Task ID"/>
</div>
<div>
Name:
<input [(ngModel)]="task.taskName" placeholder="Name"/>
</div>
<div>
Responsible ID:
<input [(ngModel)]="task.responsibleId" placeholder="Responsible ID"/>
</div>
<button (click)="updateTask(task)" *ngIf="task.taskId != null">Save</button>
<button (click)="deleteTask(task)" *ngIf="task.taskId != null">Delete</button>
<button (click)="createTask(task)" *ngIf="task.taskId == null">Create</button>
</div>
這是app.component.html
<button (click)="initNewTask()">Create new task</button>
<table>
<thead>
<th>Task ID: </th>
<th>Task Name: </th>
<th>Resp ID: </th>
<th></th>
</thead>
<tbody>
<tr *ngFor="let task of tasks" >
<td>{{ task.taskId }}</td>
<td>{{ task.taskName }}</td>
<td>{{ task.responsibleId }}</td>
<td><button (click)="editTask(task)">Edit</button></td>
</tr>
</tbody>
</table>
<app-edit-task [task]="taskToEdit"></app-edit-task>
這是edit-task.component.ts
import { Component, Input, OnInit } from '@angular/core';
import { Task } from 'src/app/models/task';
@Component({
selector: 'app-edit-task',
templateUrl: './edit-task.component.html',
styleUrls: ['./edit-task.component.css']
})
export class EditTaskComponent implements OnInit {
@Input() task?: Task;
constructor() { }
ngOnInit(): void {
}
updateTask(task:Task){
}
deleteTask(task:Task){
}
createTask(task:Task){
}
}
這是app.component.ts
import { TaskService } from './services/task.service';
import { Task } from './models/task';
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
tasks: Task[] = [];
taskToEdit?: Task;
constructor(private taskService: TaskService){}
ngOnInit() : void {
this.taskService
.getTasks()
.subscribe((result: Task[]) => (this.tasks = result));
}
initNewTask(){
this.taskToEdit = new Task();
}
editTask(task: Task){
this.taskToEdit = task;
}
}
uj5u.com熱心網友回復:
來自
<h2 {{ task.taskName }}>
在edit-task.component.html
我不知道你到底想做什么,但那行不通
轉載請註明出處,本文鏈接:https://www.uj5u.com/net/504893.html
標籤:javascript html 有角度的
上一篇:如何將PDF內容從另一個HttpResponseMessage回傳到瀏覽器?
下一篇:百分比變化計算器無法多次作業