Calling method on child component not passing data LWC

Question

I want to put an anchor tag on my parent component html that will open up a modal when a user clicks on '{iteratorname.value.LineStatus}'

Right now it opens the modal but no data is showing up, and it wont close when you press the 'close; button.

Parent.html

<template for:each={c.EssentialPlacementItems} for:item="item">
  <td class="product-body-cell" key={item.MasterItem}><a onclick={handleOpen}>
      <template  iterator:iteratorname={item.LineStatuses}>
          <template if:true={iteratorname.first}>
              {iteratorname.value.LineStatus}
          </template>
      </template> 
      <c-order-popup orderrecordids={item.OrderIds}></c-order-popup></a>
  </td> 
</template>

Parent.js

handleOpen() {
    this.template.querySelector('c-order-popup').showModal();
}

child.html

<template>

  <template if:true={openModal}>
    <div class="slds-modal slds-fade-in-open slds-backdrop">
      <div class="slds-modal__container">
        <!--HEADER Section-->
        <div class="slds-modal__header">
          <lightning-button-icon icon-name="utility:close" alternative-text="Close this window" size="large"
                                 variant="bare-inverse" onclick={closeModal} class="slds-modal__close">
          </lightning-button-icon>
          <h2>Orders</h2>
        </div>
        <!--Body Section-->

        <div class="slds-modal__content slds-p-around_medium">

          <div style="height: 300px;">
            <template if:true={orderList}>
              <lightning-datatable key-field="test" 
                                   data={orderList} 
                                   columns={columns} 
                                   hide-checkbox-column="true"
                                   is-loading={tableLoadingState}>
              </lightning-datatable>
            </template>
            <template if:true={error}>
              {error}
            </template>
          </div>


        </div>
        <!--Footer Section-->
        <div class="slds-modal__footer">
          <lightning-button style="margin-left: 10px;" icon-name="utility:close" label="Close" variant="destructive"
                            onclick={closeModal}>
          </lightning-button>
        </div>
      </div>
    </div>
  </template>

</template>

Child.js

import { LightningElement, api, track, wire } from 'lwc';
import getOrders from '@salesforce/apex/orderInfo.getOrders';
export default class OrderPopup extends LightningElement {
  @track error;
  @api orderrecordids;
  @track orderList;
  @wire(getOrders, { OrderIds: '$orderrecordids' })
  wiredOrders({
    error,
    data
  }) {
    if (data) {
      this.orderList = data;
    } else if (error) {
      this.error = error
    }
  }

  @track openModal = false;

  @api showModal() {
    this.openModal = true;
  }
  @api closeModal() {
    this.openModal = false;
  }
}