0

My application structure has 1 service and 2 components:

Service: Holds all of the firestore connections ViewComponent: Gets a list from the service and displays it ItemManagementComponent: Displays a form and allows the user to add a new entry.

The Issue I have a button in the ViewComponent that (in theory), sends a documentID to the ManagementComponent which then displays that document data in the form, allowing for a user update. Right now, when I click the button I can track the doumentID, and the service return all the way through my application, but I'm not actually getting a document returned. I can run the exact same code with a hardwired documentID, and it works great, so obviously I'm missing something.

Service

  getUpdateInventoryItem(updateId: string) {
    console.log('service', updateId)
    this.updateId = updateId
    console.log('service2', this.inventoryCollectionRef.doc(updateId).ref.get())
    return this.inventoryCollectionRef.doc(updateId).ref.get()
  }

View HTML

<td><button type="button" class="btn btn-default" (click)="updateInventory(item.id)">Upd</button></td>
<app-item-management [updateID]="ChildUpdateId"></app-item-management>

View Component

@Output() inventoryUpdate = new EventEmitter();
public ChildUpdateId: string;

updateInventory(updateId: string) {
this.ChildUpdateId = updateId;
}

ItemManagement Component

@Input() updateID;

  ngOnChanges(incomingID: SimpleChanges) {
    if (!incomingID['updateID'].isFirstChange()) {
      for (let ID in incomingID) {
        let chng = incomingID[ID];
        let cur = JSON.stringify(chng.currentValue);
        console.log('current', cur)
        this.updateInventory(cur)
      }
    }
  }

updateInventory(incomingID) {
    console.log('updateFunction',incomingID)
    this.inventoryService.getUpdateInventoryItem(incomingID)
      .then((doc) => {
        if (doc.exists) {
          this.editItem = doc.data();
          this.inventoryForm.patchValue(this.editItem);
          this.update = true;
        } else {
          console.log("No such document!");
        }
      }).catch(function (error) {
        console.log("Error getting document:", error);
      });
  };

So, if I click on the update button on the view HTML, this is what my console shows me: console log screenshot From my perspective, I'm seeing the ID passed to the service, and the service has a properly formatted document response to return.

If I copy a document ID directly from my console log and hardwire it to the updateInventory function on the ItemManagementComponent, and call the hardwired function from the NgOnChanges it works. It's just that somehow when I'm passing in this ID as a variable it's short circuiting.

I had this same updateInventory function working with a slightly different implementation that took a variable, so I'm really stumped. Any help is greatly appreciated!

4

1 回答 1

0

问题 作为一个新手，我使用了很多代码示例来让事情正常工作，然后试图弄清楚它为什么工作等等。在这种情况下，我发现的代码片段是使用 JSON.stringify 来设置 documentID 值. 没有意识到后果，我把它留在了里面。

let cur = JSON.stringify(chng.currentValue);

我缺少的是控制台中一个非常微妙的（对我而言）线索。

**Console Return** service "X7hFhwDLzFIicl5uUCEX"

我认为引号只是控制台中的标准符号。直到一时兴起，我在视图组件的原始按钮上添加了一个 console.log，并注意到我从那里返回的结果没有引号：

service X7hFhwDLzFIicl5uUCEX

解决此问题所需的只是将上面的 stringify 行更改为：

let cur: string = chng.currentValue;

否则，其余代码似乎正在做我想做的事。感谢任何看过的人！

于 2018-12-02T15:40:49.597 回答