如何从父函数向子函数发送数据答案

【问题标题】：how to send data from a function from parent to child如何从父函数向子函数发送数据
【发布时间】：2019-03-11 23:36:57
【问题描述】：

嗨，我想以角度 6 将数据从父母发送给孩子我的孩子.ts

this.rest.sendRequest('GET', 'station', null).subscribe(
        value => {
            this.data = value['Station'];
            this.source.load(this.data);
            console.log(this.data);
        },
    );

我的父母.ts

addStation() {
  this.rest.sendRequest( 'POST', 'station', this.station).subscribe();
}

我的孩子.html

<nb-card>
  <nb-card-header>
    لیست ایستگاه ها
  </nb-card-header>

  <nb-card-body>
    <ng2-smart-table [getValueFromParent]="value" [settings]="settings" [source]="source" (deleteConfirm)="onDeleteConfirm($event)" (editConfirm)="onEditConfirm($event)">
    </ng2-smart-table>
  </nb-card-body>
</nb-card>

我的 parent.html 是：

    <nb-card>
      <nb-card-header>
        ایستگاه
      </nb-card-header>
      <nb-card-body>
        <div class="row">
          <div class="col-md-4">
            <nb-card>
              <nb-card-header>
                <p>افزودن ایستگاه جدید</p>
              </nb-card-header>
              <br>
              <nb-card-body>
                <h3>افزودن ایستگاه</h3>
                <form (ngSubmit)="addStation()" #form="ngForm" autocomplete="on" >
                <div class="form-control">
                    <div>
                    <label for="title">
                      عنوان
                    </label>
                    <input class="form-control" id="title" name="title" nbInput [(ngModel)]="station.title" placeholder="عنوان">
                  </div>
                  <div>
                    <button nbButton type="submit" >افزودن ایستگاه</button>
                  </div>

                </div>
                </div>
                </form>

              </nb-card-body>
            </nb-card>
          </div>

          <div class="col-md-8">
            <ngx-smart-table></ngx-smart-table>
          </div>
        </div>

我想当表单发送我的表格时自动更新我该怎么做？

编辑：我添加了整个 html

我的 this.station 是对象我的 this.data 是数组

我用过 ng2-smart-table

【问题讨论】：

您可以使用@Input() 将数据从父级传递给子级。
在哪个组件中？我想要 this.station 发送
您要求将数据从父级发送到子级，但您似乎想将数据从子级发送到父级。
数据是父级中的this.station，我想将其发送给子级并将其推送到this.data数组
但是在你的 parent.html 中，你永远不会使用你的子组件标签。那你怎么能说哪个是孩子或哪个是父母。

标签： angular typescript

【解决方案1】：

在parent.ts

const value: string;

addStation() {
  this.value = this.station;      // initialize this.station to value.
  this.rest.sendRequest( 'POST', 'station', this.station).subscribe();
}

然后在parent.html 给你的孩子打电话。

  <ngx-smart-table [getValueFromParent]="value"></ngx-smart-table>

在child .ts

export class ChildComponent implements OnInit {
  @Input() getValueFromParent: string;   // now getValueFromParent get the result of this.station.
  constructor() {}

  ngOnInit() {}
}

【讨论】：

它在将 [getValueFromParent]="value" 附加到我的提交按钮时发送此错误：无法绑定到“getValueFromParent”，因为它不是“按钮”的已知属性。 ("
你能在parent.html中显示你使用child component的代码
对不起，我将它附加到父级，现在我将它附加到子级并得到这个错误：错误错误：未捕获（承诺）：错误：模板解析错误：无法绑定到'getValueFromParent'因为它不是“ng2-smart-table”的已知属性。

【解决方案2】：

希望您使用的是 ngx-smart-table，请参考以下链接了解如何将源数据传递到表中，

https://akveo.github.io/ng2-smart-table/#/examples/using-filters

import { Ng2SmartTableModule, LocalDataSource } from 'ng2-smart-table'; //导入本地数据源

source: LocalDataSource; // 给组件添加一个属性

constructor() { this.source = new LocalDataSource(this.data); }// 创建源

//赋值给ngx-smart-table

<ng2-smart-table [settings]="settings" [source]="source"></ng2-smart-table>

【讨论】：