Question

我有一个组件，显示一个＆＃39;项目列表＆＃39;这是使用选择器创建的组件。我有一个我想要的复选框，当点击更新“状态”时所有儿童组成部分。

我真的很难找到正确的解决方案。有关详细信息，请参阅Plunkr。

add_action( 'wp_ajax_nopriv_ajax_pgsc_supporters', 'pgsc_ajax_get_supporters' );
add_action( 'wp_ajax_pgsc_supporters', 'pgsc_ajax_get_supporters' );

function pgsc_ajax_get_supporters(){
    $politicianId = $_POST['postId'];
    $field = get_field_object('lista', $postId);
    $values = get_field("lista", $postId);
    $lists = array();
    foreach($values as $val){
      $listName = $field["choices"][$val];
      $logo = get_field("logo", $val)["sizes"]["thumbnail"];
      $lists[$listName] = array("permalink" => get_post_permalink($val), "logo" => $logo);
    }
    wp_reset_query();
    wp_send_json($lists);
}

Answer 1

<强>更新

@Component({
  selector: 'my-item',
  inputs: ['state']; // added
  template: `
    <div>
      <label><input type="checkbox" [(ngModel)]="state"/> {{state}}</label>
    </div>
  `
})
export class MyItemComponent {
  state: boolean = false;
}

然后像

一样使用它

<my-item [state]="state"></my-item>

<强>原始

角度变化检测无法检测到数组中的变化这应该使它工作：

  constructor() {
    this.items.push(new Item("hello"));
    this.items.push(new Item("test"));
    this.items = this.items.slice();
  }

这样，新的数组（副本）被分配给this.items，因此Angular会将其识别为更改。

在MyItem中，您需要input

@Component({
  selector: 'my-item',
  inputs: ['items']; // added
  template: `
    <div>
      <label><input type="checkbox" [(ngModel)]="state"/> {{state}}</label>
    </div>
  `
})
export class MyItemComponent {
  state: boolean = false;
  items: Item[]; // added
}

然后用

建立连接

<my-item [items]="items"></my-item>

在MyItemComponent更改工具items时获取ngOnChanges()中调用的代码另请参阅https://angular.io/docs/ts/latest/api/core/OnChanges-interface.html

export class MyItemComponent {
  state: boolean = false;
  items: Item[]; // added
  ngOnChanges(changes: {[propName: string]: SimpleChange}) {
    console.log('ngOnChanges - myProp = ' + changes['items'].currentValue);
  }
}

Answer 2

@Günter所说的，这是完全正确的！

那就是说，我看到你的傻瓜犯了一些错误：

@Component({
  selector: 'my-item',
  template: `
    <div>Hello</div>
  `
});  // <------- Remove the ;
export class MyItemComponent {

}

你错过了directives属性中的组件：

@Component({
  selector: 'my-app',
  template: `
    <div>
      <label><input type="checkbox" [(ngModel)]="state"/> {{state}}</label>
    </div>
    <div *ngFor="#item of items">
      <my-item></my-item>
    </div>
  `,
  directives: [] // <-------- Add the MyItemComponent component
})
export class App {
  (...)
}

修改

您可以利用@ViewChildren装饰器直接引用儿童。

@Component({ selector: 'my-app', template: ` (...) `, directives: [MyItemComponent] }) export class App { (...) @ViewChildren(MyItemComponent) children:MyItemComponent[]; (...) }

然后，您可以向复选框添加控件以检测更改并相应地更新子组件的状态：

@Component({ selector: 'my-app', template: ` <div style="border: 1px solid red;"> <label><input type="checkbox" [(ngModel)]="state" [ngFormControl]="stateCtrl"/> {{state}}</label> </div> <div *ngFor="#item of items"> <my-item></my-item> </div> `, directives: [MyItemComponent] }) export class App { (...) constructor() { this.items.push(new Item("hello")); this.items.push(new Item("test")); this.stateCtrl = new Control(); this.stateCtrl.valueChanges.subscribe( data => { this.children._results.forEach(child => { child.state = data; }); }); } }

我用这种方法更新了你的plunkr：https://plnkr.co/edit/nAA2VxZmWy0d4lljvPpU?p=preview。

有关详细信息，请参阅此链接：Why is that i can't inject the child component values into parent component?

Angular 2 Children组件检测父级的变化

2 个答案: