title: "Could not find column with id" but the column is there
body: <p><strong>What I want to happen:</strong></p>
  <p>I want the vendorid to show up and to stop giving me an error.</p>
  <p><strong>What is happening:</strong></p>
  <p>I'm getting a could not find column error.</p>
  <hr />
  <p>I'm using typescript for the client side, and java for the server side (not shown, just thought I would throw it out). I'm also using the Angular framework with Material components.</p>
  <hr />
  <p>I'm getting ERROR Error: Could not find column with id &quot;vendorid&quot; but vendorid is present in my table. I've been at this for hours and can't figure out why its not working.</p>
  <hr />
  <p><strong>THINGS I'VE TRIED:</strong></p>
  <ul>
  <li>I've done a check to see if my data even works by checking localhost and it does.</li>
  <li>If I remove vendorid from the .ts's displayedColumns, I don't get any errors and my data shows.</li>
  <li>I've ensured the spelling is correct by copy and pasting the spelling wherever it is used.</li>
  </ul>
  <hr />
  <p>This is what my html looks like:</p>
  <pre><code>&lt;mat-card *ngIf=&quot;hideEditForm&quot; style=&quot;margin-bottom: 10vh;&quot;&gt;
    &lt;mat-card-header layout=&quot;row&quot;&gt;
      &lt;mat-card-title style=&quot;margin-bottom: 4vh;&quot;&gt;
        &lt;span&gt;{{ msg }}&lt;/span&gt;
      &lt;/mat-card-title&gt;
    &lt;/mat-card-header&gt;
    &lt;mat-card-content&gt;
      &lt;table mat-table [dataSource]=&quot;dataSource&quot; class=&quot;mat-elevation-z8&quot; matSort&gt;
        &lt;ng-container matColumnDef=&quot;id&quot;&gt;
          &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt;&lt;div class=&quot;centerheader&quot;&gt;Product No.&lt;/div&gt;&lt;/th&gt;
          &lt;td mat-cell *matCellDef=&quot;let element&quot;&gt; {{element.id}} &lt;/td&gt;
        &lt;/ng-container&gt;
        &lt;ng-container matColumnDef=&quot;name&quot;&gt;
          &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt;&lt;div class=&quot;centerheader&quot;&gt;Name&lt;/div&gt;&lt;/th&gt;
          &lt;td mat-cell *matCellDef=&quot;let element&quot;&gt; {{element.name}} &lt;/td&gt;
        &lt;/ng-container&gt;
        &lt;!-- Vendor Id Column --&gt;
        &lt;ng-container matColumnDef=&quot;employeeid&quot;&gt;
          &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt; &lt;div class=&quot;centerheader&quot;&gt;Vendor No.&lt;/div&gt;&lt;/th&gt;
          &lt;td mat-cell *matCellDef=&quot;let element&quot;&gt; {{element.vendorid}} &lt;/td&gt;
        &lt;/ng-container&gt;
        &lt;tr mat-header-row *matHeaderRowDef=&quot;displayedColumns; sticky: true&quot;&gt;&lt;/tr&gt;
        &lt;tr mat-row *matRowDef=&quot;let row; columns: displayedColumns;&quot;
            (click)=&quot;select(row)&quot;&gt;&lt;/tr&gt;
      &lt;/table&gt;
      &lt;div class=&quot;padtop15&quot;&gt;
        &lt;mat-icon (click)=&quot;newProduct()&quot; matTooltip=&quot;Add New Product&quot; class=&quot;addicon&quot; color=&quot;primary&quot; &gt;
          control_point
        &lt;/mat-icon&gt;
      &lt;/div&gt;
    &lt;/mat-card-content&gt;
  &lt;/mat-card&gt;
  &lt;mat-card *ngIf=&quot;!hideEditForm&quot;&gt;
    &lt;mat-card-header layout=&quot;row&quot;&gt;
      &lt;mat-card-title&gt;&lt;span&gt;{{ msg }}&lt;/span&gt;&lt;/mat-card-title&gt;
    &lt;/mat-card-header&gt;
    &lt;mat-card-content&gt;
      &lt;app-product-detail [selectedProduct]=&quot;selectedProduct&quot;
                          [vendors]=&quot;vendors$ | async&quot;
                          (cancelled)=&quot;cancel('cancelled')&quot;
                          (saved)=&quot;save($event)&quot;
                          (deleted)=&quot;delete($event)&quot;&gt;
      &lt;/app-product-detail&gt;
    &lt;/mat-card-content&gt;
  &lt;/mat-card&gt;
  </code></pre>
  <p>And this is what my .ts looks like:</p>
  <pre><code>import {Component, OnInit, ViewChild } from '@angular/core';
  import { MatTableDataSource } from '@angular/material/table';
  import { MatSort } from '@angular/material/sort';
  import { Product } from './product';
  import { Vendor } from '../vendor/vendor';
  import { VendorService } from '../vendor/vendor.service';
  import { ProductService } from '../product/product.service';
  import { Observable, of } from 'rxjs';
  import { catchError, share } from 'rxjs/operators';
  @Component({
    selector: 'app-product',
    templateUrl: 'product-home.component.html'
  })
  export class ProductHomeComponent implements OnInit {
    vendors$: Observable&lt;Vendor[]&gt;;
    products: Product[];
    products$: Observable&lt;Product[]&gt;;
    selectedProduct: Product;
    hideEditForm: boolean;
    msg: string;
    todo: string;
    url: string;
    displayedColumns: string[] = ['id', 'name', 'vendorid'];
    dataSource: MatTableDataSource&lt;Product&gt;;
  
    @ViewChild(MatSort) sort: MatSort;
    constructor(private productService: ProductService, private vendorService: VendorService) {
      this.hideEditForm = true;
    } // constructor
  
    ngOnInit(): void {
      this.msg = 'loading vendors from server...';
      this.msg = `Vendor's loaded`;
      this.vendors$ = this.vendorService.getAll().pipe(
        share(),
        catchError(error =&gt; {
          if (error.error instanceof ErrorEvent) {
            this.msg = `Error: ${error.error.message}`;
          } else {
            this.msg = `Error: ${error.message}`;
          }
          return of([]);
        })
      );
      this.msg = `Product's loaded`;
      this.products$ = this.productService.getAll().pipe(
        share(),
        catchError(error =&gt; {
          if (error.error instanceof ErrorEvent) {
            this.msg = `Error: ${error.error.message}`;
          } else {
            this.msg = `Error: ${error.message}`;
          }
          return of([]);
        })
      );
      this.refreshDS();
    }
    select(product: Product): void {
      this.todo = 'update';
      this.selectedProduct = product;
      this.msg = `Product ${product.id} selected`;
      this.hideEditForm = !this.hideEditForm;
    } // select
    /**
     * cancelled - event handler for cancel button
     */
    cancel(msg?: string): void {
      this.hideEditForm = !this.hideEditForm;
      this.refreshDS();
    } // cancel
    /**
     * update - send changed update to service update local array
     */
    update(product: Product): void {
      this.msg = 'Updating...';
      this.productService.update(product).subscribe( payload =&gt; {
          if (payload.id !== '') {
            this.msg = `Product ${product.id} updated!`;
          } else {
            this.msg = 'Product not updated! - server error';
          }
          this.refreshDS();
        },
        err =&gt; {
          this.msg = `Error - product not updated - ${err.status} - ${err.statusText}`;
        });
      this.hideEditForm = !this.hideEditForm;
    } // update
    /**
     * save - determine whether we're doing and add or an update
     */
    save(product: Product): void {
      (product.id) ? this.update(product) : this.add(product);
    } // save
    /**
     * add - send product to service, receive newid back
     */
    add(product: Product): void {
      this.msg = 'Adding...';
      product.id = '';
      this.productService.add(product).subscribe( payload =&gt; {
          if (payload.id !== '') {
            this.msg = `Product ${payload.id} added!`;
          } else {
            this.msg = 'Product not added! - server error';
          }
          this.refreshDS();
        },
        err =&gt; {
          this.msg = `Error - product not added - ${err.status} - ${err.statusText}`;
        });
      this.hideEditForm = !this.hideEditForm;
    } // add
    /**
     * newProduct - create new product instance
     */
    newProduct(): void {
      this.selectedProduct = {
        id: '',
        vendorid: 0,
        name: '',
        costprice: 0,
        msrp: 0,
        rop: 0,
        eoq: 0,
        qoh: 0,
        qoo: 0,
        qrcode: '',
        qrcodetxt: '',
      };
      this.msg = 'New product';
      this.hideEditForm = !this.hideEditForm;
    } // newProduct
    /**
     * delete - send product id to service for deletion
     */
    delete(product: Product): void {
      this.msg = 'Deleting...';
      this.productService.delete_idString(product.id)
        .subscribe(payload =&gt; {
            if (payload === '1') { // server returns # rows deleted
              this.msg = `Product ${product.id} deleted!`;
            } else {
              this.msg = 'Product not deleted!';
            }
            this.refreshDS();
          },
          err =&gt; {
            this.msg = `Error - product not deleted - ${err.status} - ${err.statusText}`;
          });
      this.hideEditForm = !this.hideEditForm;
    } // delete
    /**
     * refresh - update data table with any changes,
     * and reset sort directive
     */
    refreshDS(): void {
      this.products$.subscribe(products =&gt; {
        this.dataSource = new MatTableDataSource(products);
        this.dataSource.sort = this.sort;
      });
    } // refresh
  } // ProductHomeComponent
  </code></pre>