Блог

Я пытался заполнить таблицу с представлением химической структуры в одном столбце (структура указана в таблице), но, похоже, это не работает. Это html-файл, который у меня есть.

 <table id="myTable" class="table table table-sm" *ngIf="this.curation.head!=undefined">
                    <thead>
                        <tr style="line-height: 90px;">
                            <th>Name</th>                         
                            <th>Structure curated</th>                         
                            <th>CAS</th>                         
                            <th>Substance type</th>                         
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let res of this.curation.head.CAS;let i= index">
                            <td class="align-middle">{{this.curation.head['substance_name'][i]}}</td>
                            <td class="align-middle"><svg #sml [attr.id]="'this_canvas'   i">{{this.curation.head['structure_curated'][i]}}</svg></td>
                            <td class="align-middle">{{this.curation.head['CAS'][i]}}</td>
                            <td class="align-middle">{{this.curation.head['substance_type_name'][i]}}</td>
                        </tr>
                    </tbody>
            </table>
 

И это функция, которая передает значения инструменту smilesdrawer.

  drawCurationHeader() {
    const options = { 'width': 600, 'height': 300 };
    const smilesDrawer = new SmilesDrawer.Drawer(options);
    for (let i = 0; i < this.curation.head["structure_curated"]; i  ) {
        SmilesDrawer.parse(this.curation.head["structure_curated"][i], function(tree) {
            // Draw to the canvas
            smilesDrawer.draw(tree, 'this_canvas'  i, 'light', false);
            }, function (err) {
              console.log(err);
          });
    }
  }
 

В консоли я вижу, что соединение написано на холсте, но не нарисовано. Вот импорт для этого компонента:

 import * as SmilesDrawer from "smiles-drawer";
import { ViewChildren } from "@angular/core";
import { QueryList } from "@angular/core";
import { ElementRef } from "@angular/core";
import { saveAs } from "file-saver";
 

Вот результат instpector:

 <svg _ngcontent-sqr-c133="" id="this_canvas9">Oc1cccc2ccccc12</svg>
 

Таким образом, параметры считываются правильно, но это не отображается.