Angular: Как использовать входное значение из родительского компонента в файле машинописного текста

Question

Как использовать / манипулировать @Input()items в child-component.ts прежде чем передать его child-component.html? Я получаю пустой объект, если консольный вход ngOnInit

дети-component.ts

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

parent.component.html

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

parent.component.ts

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

sample.json

пример ответа, который передан this.item

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

Answer 1

Вы также можете использовать @Input() на методы установки, а не только переменные членов класса. Вы добавляете @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;
  }

}

Ниже приведен пример стекаблица вместе с угловой документацией.

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

https://angular.io/guide/component-interaction

Answer 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 это все о реактивном программировании.