Question

嗨，我想以角度6从父母向孩子发送数据我的孩子。

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();
}

我的child.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

Answer 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() {}
}

Answer 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>

如何将函数中的数据从父级发送到子级

2 个答案: