html - 如何将输入框的值传递到数组中,然后使用 html 列表标签显示它
问题描述
我是角度的初学者;我正在尝试将输入框的值传递到数组中,然后使用 html 列表标记显示它。
app.component.html
<form #todoForm= "ngForm"(submit)="todoSubmit(todoForm.value); todoForm.resetForm()" >
<div class="form-group">
<h1 class="text-center ">Todo App</h1>
<div class="input-group-prepend">
<input type="text" #todo class="form-control" todo.value='' placeholder="Add Todo" name="todo" ngModel>
<span class="input-group-text" (click)="addTodo(todo.value)">
<i class="material-icons">add</i></span>
</div>
</div>
<div class="data">
<ul class="list-unstyled">
<li [@moveInLeft] *ngFor="let item of todoArray">{{todo}} <i (click)="deleteItem(todo)" class="material-icons">delete</i></li>
</ul>
</div>
</form>
app.component.ts
import { Component} from '@angular/core';
import { trigger,animate,style,transition,keyframes } from '@angular/animations';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
animations:[
trigger("moveInLeft",[
transition("void=> *",[style({transform:"translateX(300px)"}),
animate(200,keyframes([
style({transform:"translateX(300px)"}),
style({transform:"translateX(0)"})
])
)
]),
transition("*=>void",[style({transform:"translateX(0px)"}),
animate(100,keyframes([
style({transform:"translateX(0px)"}),
style({transform:"translateX(300px)"})
])
)
])
])
]
})
export class AppComponent {
todoArray = [];
todo;
todoForm: any;
addTodo(value){
if(value!==""){
this.todoArray.push(value)
}else{
alert('Field required **')
}
}
deleteItem(todo){
for(let i=0 ;i<= this.todoArray.length ;i++){
if(todo== this.todoArray[i]){
this.todoArray.splice(i,1)
}
}
}
todoSubmit(value:any){
if(value!==""){
this.todoForm.reset()
}else{
alert('Field required **')
}
}
}
问题出在 this.todoArray.push(value) 错误消息上:“any”类型的参数不可分配给“never”类型的参数
解决方案
您的 html 中存在一个问题,您没有正确地将todo
值与input
框绑定。
试试下面的版本:
<div class="container">
<form
#todoForm="ngForm"
(submit)="todoSubmit(todoForm.value); todoForm.resetForm()"
>
<div class="form-group">
<h1 class="text-center">Todo App</h1>
<div class="input-group-prepend">
<input
type="text"
class="form-control"
name="todo"
placeholder="Add Todo"
[(ngModel)]="todo"
/>
<span class="input-group-text" (click)="addTodo()">
<i class="material-icons">add</i></span
>
</div>
</div>
<div class="data">
<ul class="list-unstyled">
<li *ngFor="let item of todoArray; let i=index">
<i (click)="deleteItem(i)" class="material-icons">
{{item}} delete</i>
</li>
</ul>
</div>
</form>
</div>
TS变化——
import { Component } from '@angular/core';
import {
trigger,
animate,
style,
transition,
keyframes,
} from '@angular/animations';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
animations: [
trigger('moveInLeft', [
transition('void=> *', [
style({ transform: 'translateX(300px)' }),
animate(
200,
keyframes([
style({ transform: 'translateX(300px)' }),
style({ transform: 'translateX(0)' }),
])
),
]),
transition('*=>void', [
style({ transform: 'translateX(0px)' }),
animate(
100,
keyframes([
style({ transform: 'translateX(0px)' }),
style({ transform: 'translateX(300px)' }),
])
),
]),
]),
],
})
export class AppComponent {
title = 'app';
todoArray = [];
todo: string = null;
todoForm: any;
addTodo() {
if (this.todo !== '') {
this.todoArray.push(this.todo);
} else {
alert('Field required **');
}
}
/*delete item*/
deleteItem(index: number) {
this.todoArray.splice(index, 1);
}
// submit Form
todoSubmit(value: any) {
if (value !== '') {
//this.todoArray.push(value.todo)
this.todoForm.reset();
} else {
alert('Field required **');
}
}
}
推荐阅读
- c# - 安卓中的 SignalR
- sql - SQL-Server 触发器为 DELETED 行字段值返回 Null 值
- kubernetes - Prometheus 查询 pod 内存使用性能的分位数
- spring-boot - Apache ignite:禁用对等类加载
- angular - 如何在 Konva 舞台上的 Ionic v3 应用程序上显示表情符号?
- javascript - 无法使用 delete 删除数组索引/项目
- javascript - 如何在 React 生成的类名上使用 querySelectorAll?
- javascript - Vue组件脚本缩进规则冲突
- python - 我无法从条件之外的 foreach 循环访问变量
- c# - 如何在视图中显示反序列化的嵌套 JSON 对象的属性?