所以，我現在正在學習 Angular，并嘗試做一個 CRUD 應用程式。幾乎一切正常，除了嘗試使用 ID 獲取資料時，我可以訪問component.ts檔案中的所有資料，但相同的資料不會呈現到 html 檔案中。這是我嘗試過的：-
編輯到.component.ts
export class EditTodoComponent implements OnInit {
private tid: number = 0;
public Todo:TodoModel= null ;
public desc:string='';
public title:string='';
public id:number;
constructor(private route: ActivatedRoute, private http:HttpClient) { }
ngOnInit(): void {
this.route.paramMap.subscribe(all_params =>{
this.tid = parseInt(all_params.get('id'))
//console.log( all_params.get('id'))
//console.log( this.tid );
});
this.getTodoFromId(this.tid)
}
getTodoFromId(id){
//console.log("id=" id)
this.http.get<{data: any}>('http://localhost:3000/api/todos/get_todo_from_id/' id).subscribe((data) =>{
console.log("response in angular= \n");
this.Todo = data[0]
console.log(this.Todo.todo_title) //-> This one works
}
editOnSubmit(form:NgForm){
//something here
}
編輯-todo.component.html
<div class="col-md-12">
<form (ngSubmit)="editOnSubmit(todoForm)" #todoForm="ngForm">
<input type="text" class="form-control" id="todo_id" [(ngModel)]="id" name="todo_id" value="1">
<div class="mb-3">
<label for="todo_title" class="form-label">Title</label>
<input type="text" class="form-control" id="todo_title" [(ngModel)]="title" name="title" value="{{ Todo.todo_title}}"> //-> This one does not work.
</div>
<div class="mb-3">
<label for="label" class="form-label">Description</label>
<textarea class="form-control" id="todo_description" [(ngModel)]="desc" name="desc" ></textarea>
</div>
<button type="submit" class="btn btn-success">Edit To Do</button>
</form>
</div>
</div>
分開，
從編輯到.component.ts :-
console.log(this.Todo.todo_title) 作品
但是來自edit-todo.component.html
<input type="text" id="todo_title" [(ngModel)]="title" name="title" value="{{ Todo.todo_title}}"> 不起作用
uj5u.com熱心網友回復：
這是因為您在同一輸入欄位上配置了一個 ngModel 和一個值
在這種情況下，ngModel 優先于 value 屬性
要修復它，您可以在 ngOnInit
this.title = this.Todo.todo_title;
在您的情況下，您等待來自 http 請求的回復，以便在 hte http 回復后進行初始化：
getTodoFromId(id){
this.http.get<{data: any}>('http://localhost:3000/api/todos/get_todo_from_id/' id).subscribe((data) =>{
console.log("response in angular= \n");
this.Todo = data[0]
this.title = this.Todo.todo_title;
console.log(this.Todo.todo_title);
}
uj5u.com熱心網友回復：
定義 BehaviorSubject 型別的屬性。
isAvailableData = new BehaviorSubject<boolean>(true);
然后在您訂閱資料的地方將其設定為 true。
getTodoFromId(id){
//console.log("id=" id)
this.http.get<{data: any}>('http://localhost:3000/api/todos/get_todo_from_id/' id).subscribe((data) =>{
console.log("response in angular= \n");
this.Todo = data[0];
this.isAvailableData.next(true);
console.log(this.Todo.todo_title) //-> This one works
}
之后在你的 HTML 中將 ngIf 添加到 col-md-12 div：
<div class="col-md-12" *ngIf="(isAvailableData | async)">
<form (ngSubmit)="editOnSubmit(todoForm)" #todoForm="ngForm">
<input type="text" class="form-control" id="todo_id" [(ngModel)]="id" name="todo_id" value="1">
<div class="mb-3">
<label for="todo_title" class="form-label">Title</label>
<input type="text" class="form-control" id="todo_title" [(ngModel)]="title" name="title" value="{{ Todo.todo_title}}"> //-> This one does not work.
</div>
<div class="mb-3">
<label for="label" class="form-label">Description</label>
<textarea class="form-control" id="todo_description" [(ngModel)]="desc" name="desc" ></textarea>
</div>
<button type="submit" class="btn btn-success">Edit To Do</button>
</form>
此外，您在表單中犯了一個錯誤，輸入應如下所示：
并且不需要為id、title、...定義屬性，這些都是todo物件的屬性
<label for="todo_title" class="form-label">Title</label>
<input type="text" class="form-control" id="todo_title" [(ngModel)]="Todo.todo_title" name="todo_title" #todo_title="ngModel">
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/392342.html
上一篇：Angular-null型別的引數不能分配給IUser型別的引數
下一篇：帶有方括號的“getElementsByClassName()[]”代碼？它有什么作用？如何將其轉換為jQuery？[復制]