1

@Input()items在child-component.ts我们将它传递给之前如何使用/操作child-component.html？如果控制台登录，我会得到空对象ngOnInit

子组件.ts

  @Input()items: any[] = [];

父组件.html

<child-component [items]="items"></child-component>

父组件.ts

  indexOrders() {
    this.orderService
      .indexOrders()
      .subscribe(
        (res) => {
        this.items = res;
        },
        (err) => {
          serviceHttpErrorHandler(err);
        },
      );
  }

示例.json

传递给 this.item 的示例响应

[
   {
      "text":"wood",
      "value":"100"
   },
   {
      "text":"chair",
      "value":"200"
   },
   {
      "text":"board",
      "value":"300"
   }
]

4

2 回答 2

3

您还可以使用@Input()setter 方法，而不仅仅是类成员变量。您添加@Input()到方法，修改值，然后将其分配给成员变量。

child.component.ts

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {

  
  _items: any;

  constructor() { }

  ngOnInit() {
  }

  @Input()
  public set items(items:any) 
  {
    // YOU CAN MODIFY THE ITEMS HERE
    // BEFORE ASSIGNING TO _items

    this._items = items;
  }

}

下面是一个 stackblitz 示例以及 Angular 文档。

https://stackblitz.com/edit/angular-rqqn2j

https://angular.io/guide/component-interaction#intercept-input-property-changes-with-a-setter

于 2019-08-31T00:52:39.193 回答
2 
   //Create and Observable
   $items: Observable<any>;

   indexOrders() {
         this.$items= this.orderService
          .indexOrders()
          .pipe(
             //do whatever you want to do here to modify the data,
             catchError(error)
          );
      }

HTML

   <child-component [items]="$items | async"></child-component>

异步管道将为您完成订阅和取消订阅。这样你就不必销毁订阅，如果你使用.subscribe()

https://blog.angularindepth.com/reading-the-rxjs-6-sources-map-and-pipe-94d51fec71c2

https://www.learnrxjs.io/operators/error_handling/catch.html

看看异步管道和来自 RxJS的管道。人们在现实世界中一直使用它们。Angular 是关于反应式编程的。

于 2019-08-31T01:00:07.753 回答