为什么我的价值输出不起作用?

时间:2018-05-09 09:46:32

标签: angular typescript

gaiz!我试图制作这个待办事项清单,但我有问题。当我在文本字段中输入值时,它不会添加到列表元素的数组中。另一方面,当我控制它.log它,它的工作原理。那么,我错过了什么?这是代码。

 <div class="row">
    <div class="col-xs-12">
      <input type='text' name='unos' #unos  placeholder="unesi zadatak" /> 
      <button class="btn btn-primary" (click)="dodaj(unos.value)">dodaj</button>

    <ul class="list-group">
      <li class="list-group-item" *ngFor="let el of elementi">
       <span>{{ el.sadrzaj }}</span> <span><input type='checkbox'></span>
         <button class="btn btn-danger" (click)="ukloni(el)">ukloni</button>
      </li>      
    </ul>
  </div>
</div>
import { Component, OnInit } from '@angular/core';

import { Element } from '../element.model';

@Component({
  selector: 'app-element-liste',
  templateUrl: './element-liste.component.html',
  styleUrls: ['./element-liste.component.css']
})
export class ElementListeComponent implements OnInit {

  elementi: Element[] = [
    {sadrzaj: 'kupi kefir'},
    {sadrzaj: 'idi na trening'},
    {sadrzaj: 'izjedi picu'}
  ];

  ukloni(item: Element){
    this.elementi.splice(this.elementi.indexOf(item), 1);
  }

  dodaj(item: Element) {

    this.elementi.push(item);
    console.log(item);
  }

  constructor() { }

  ngOnInit() {
  }

}

1 个答案:

答案 0 :(得分:0)

当前实施存在问题

  <button class="btn btn-primary" (click)="dodaj(unos.value)">dodaj</button>

这将返回字符串作为输出,而不是元素的类型。

所以你必须按照下面的方式进行输入string,创建元素并将其推送

dodaj(item: string) {
    const element : Element = {sadrzaj: item};
    this.elementi.push(element );
    console.log(item);
  }