1

This is a stupid question, but I'm not getting it.

I subscribe to an observable. Get the return topic in the subscribe. If a topic comes back from the observable, then I want to find the html div that has the same id as the returned topic.id, and update it's innerHTML or text to show the updated text returned from the put method to the controller. However, when I try .INNERHTML or .textContent, I get the following error:

ERROR TypeError: element.textContent is not a function

Or this error inside VS Code. 

ts] Cannot invoke an expression whose type lacks a call signature. Type 'String' has no compatible call signatures. [2349]
const element: HTMLElement

Here is my function call: I have verified that topic.id is a number and therefore convert it to a string for the document.getElementById call and I have also verified that topic.name is a string as well. What am I missing to make this simple thing work?

editTopicSubmit() {
    event.stopPropagation();
    if (this.editTopicId === 0) {
      this.alertify.error('Can\'t update this topic. Verify the id');
    } else {
      this.editTopic.id = this.editTopicId;
      this.topicsService.updateTopic(this.editTopic)
        .subscribe((topic: Topic) => {
          if (topic) {
            this.alertify.success(topic.name + ' updated');
            this.editTopicId = 0;
            const element = document.getElementById(topic.id.toString());
            element.textContent(topic.name);
          } else {
            this.alertify.error(this.editTopic.name + ' failed to update');
          }
        },
        (err: any) => this.alertify.error('something went wrong with updating the customer')
        );
    }
  }
J.G.Sable
  • 1,258
  • 4
  • 26
  • 62

1 Answers1

0

This answer should be able to help you. Basically, you need to access the element.nativeElement. Also, you should probably work with the @ViewChild('my-query') elements;.