###前提・実現したいこと
Angularで、dataを渡すとデータテーブルを表示する MyDataTableComponent を作りました。
dataをサーバーからとってきたら表示を更新させたいのですがやり方が分かりません。
データ取得とテーブル表示のコンポーネントを分けない場合に動くことは確認していますが、
MyDataTableComponent に切り分けてプロパティバインディングでdataを渡すようにした場合に動かないという状況です。渡し方を間違えているのではないかと思いますが良い方法が分かりません。
###試したこと(追記)
MyDataTableComponent 内でのフィルタ操作をsetTimeoutで1秒後にするなどしたら
動作したので、dataの更新後にfilterが実行できるようにすればよさそうだということまでは分かりました。
###該当のソースコード(抜粋)
MyDataTableComponent 呼び出し元
Javascript
1 2@Component({ 3 providers: [GetDataService], 4 selector: 'my-app', 5 templateUrl: './myapp.component.html', 6 styleUrls: [ 7 '../../my-data-table/my-data-table.component.css', 8 './myapp.component.css' 9 ] 10}) 11export class MyAppComponent implements OnInit { 12 13 data = []; 14 15 constructor( 16 private httpService: GetDataService 17 ) {} 18 19 ngOnInit() { 20 this.httpService.GetData().then( x => { this.data = x; }); 21 } 22}
html
1<my-data-table [data]='data'></my-data-table>
MyDataTableComponent 側
javascript
1 2@Component({ 3 selector: 'my-data-table', 4 templateUrl: './my-data-table.component.html', 5 styleUrls: ['./my-data-table.component.css'] 6}) 7export class MyDataTableComponent implements OnInit { 8 9 @Input() data = []; 10 filteredData = []; 11 12 constructor() {} 13 14 ngOnInit() { 15 // this.filteredData = this.data.filter( x => this.filterFunction(x) ); 16 setTimeout( 17 () => { 18 this.filteredData = this.data.filter( x => this.filterFunction(x) ); 19 console.log( this.data, this.filteredData ) 20 }, 1000 ); 21 } 22 23 filterFunction(x): boolean { return true; } 24} 25
###補足情報(言語/FW/ツール等のバージョンなど)
$ ng --version @angular/cli: 1.0.0 node: 6.10.0 os: win32 x64 @angular/animations: 4.0.3 @angular/common: 4.0.3 @angular/compiler: 4.0.3 @angular/compiler-cli: 4.0.3 @angular/core: 4.0.3 @angular/forms: 4.0.3 @angular/http: 4.0.3 @angular/material: 2.0.0-beta.3 @angular/platform-browser: 4.0.3 @angular/platform-browser-dynamic: 4.0.3 @angular/platform-server: 4.0.3 @angular/router: 4.0.3 @angular/cli: 1.0.0
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。