Question

我将表单的值添加到数组中，然后在控制台中显示。

这是我的提交按钮脚本：

onSubmit(myForm){
    console.log(this.myForm.value.name);
    this.item = [this.myForm.value.name, this.myForm.value.amount];
    this.sls.addItem(this.item);
    console.log(this.item);
}

当我点击提交时，我可以在控制台中正确看到该项目，但是当我想在屏幕上添加时，我得到了一个空白的div。

以下是HTML页面：

<div class="row">
  <div class="col-xs-10">
    <rb-shopping-list-add></rb-shopping-list-add>
    <hr>
    <ul class="list-group">
      <a class="list-group-item" style="cursor: pointer" *ngFor="let item of items">{{items.name}} | ({{items.amount}})</a>
    </ul>
  </div>
</div>

在<ul>中没有显示任何内容。

以下是<rb-shopping-list>模板的完整打字稿脚本：

    export class ShoppingListAddComponent implements OnInit {

      isAdd:boolean=true;
      public item;
        myForm: FormGroup;
      constructor(private sls:ShoppingListService, formBuilder: FormBuilder) {
        this.myForm = formBuilder.group({
            'name':['', Validators.required],
            'amount': ['', Validators.required]
        });
      }

      ngOnInit() {
      }

      onSubmit(myForm){
        console.log(this.myForm.value.name);
        this.item = [this.myForm.value.name, this.myForm.value.amount];
        this.sls.addItem(this.item);
        console.log(this.item);
      }

    }

修改

ShoppingServiceList脚本：

import { Ingredient } from "../shared";

export class ShoppingListService {
  private items: Ingredient[] = [];

  constructor() {}

  getItems() {
    return this.items;
  }

  addItems(items: Ingredient[]) {
    Array.prototype.push.apply(this.items, items);
  }

  addItem(item: Ingredient){
    this.items.push(item)
  }
}

Answer 1

您没有将模板中的* ngFor绑定到组件中的数组。如果ShoppingListService（sls）有一个项目数组，您可以在模板中使用它，执行以下操作：

<ul class="list-group">
  <a class="list-group-item" style="cursor: pointer" *ngFor="let item of sls.getItems()">{{item.name}} | ({{item.amount}})</a>
</ul>

小心这些名字。 * ngFor语句中“of”后面的值必须是一个数组。在双花括号插值中，您希望使用您用作循环变量的“item”变量。

Answer 2

您应该使用输出变量来通知父级再次进行服务调用

在ShoppingListAddComponent中，将输出变量添加为

Output() countInsert :EventEmitter<number> =new EventEmitter<number>();

在提交方法中添加以下行

this.countInsert.emit(i++)

您应该将父组件中的更改处理为

 <rb-shopping-list-add (countInsert)="refreshData($event)"></rb-shopping-list-add>

refreshData(val){
 //make the service call again to get the new set of data
}

Angular 2值显示在控制台中，但是当我想在模板中显示时，它们是未定义的

2 个答案: