Angular-如何在 <h></h> 标签内的图像中显示

【问题标题】：Angular- how to display in image inside <h></h> tagAngular-如何在 <h></h> 标签内的图像中显示
【发布时间】：2019-02-24 16:32:41
【问题描述】：

我正在开发一个 PHP/Laravel 应用程序，其中一个页面上有一个表格，显示一个表格，显示有关通过网站进行的各种交易的信息。

表格中的一列标题为“联系人”，并显示负责该交易的人员的详细联系信息。此列中的每个单元格还显示一个“编辑”按钮，该按钮将打开一个对话框，允许用户添加/删除/更改将为此交易显示其详细信息的联系人。

目前，当用户单击“编辑”按钮并显示对话框时，“编辑”按钮图标变为“X”以允许他们关闭对话框，但对话框本身显示在此位置下方在页面上，因此似乎有许多用户缺少这是他们关闭对话框的方式。

我想向对话框本身添加一个“X”按钮，以允许用户也通过单击它来关闭它。

显示此表格单元格和对话框的 HTML 是：

<td data-heading="Provisional Contact" class="provContactCell table__priority-column" id="fixPayerName">
    <i class="icon icon-pencil" [class.icon-close-selected]="payer.showProvContactSelector" (click)="toggleProvContactSelector(payer)">
    </i>
    ...
    <div class="provContactSelector" *ngIf="payer.showProvContactSelector">
        <h3>Provisional Contacts &amp; Managers</h3>
            <button class="icon icon-close-selected" (click)="toggleProvContactSelector(groupPayer)"></button>
            <p>Check/un-check which contacts should be provisional contacts and managers.</p>
            <div class="provContacts">
                ...
            </div>
        </div>
    </div>
</td>

我尝试在 <h></h> 标记之后添加按钮，但是当我查看页面并在浏览器中打开对话框时，按钮显示在对话框标题下方。如果我尝试将按钮放在 <h></h> 标签内，我会在控制台中收到错误，并且页面无法正确加载...

控制台错误是：

vendor.bundle.js?ver=1486951446:54441 ERROR 错误：未捕获（承诺中）：错误：加载块 common 失败。

错误：加载块公共失败。 在 HTMLScriptElement.onScriptComplete (inline.bundle.js?ver=1432283697:104) 在 HTMLScriptElement.wrapFn (polyfills.bundle.js?ver=450735834:6545) 在 ZoneDelegate.webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.bundle.js?ver=450735834:5800) 在 Object.onInvokeTask (vendor.bundle.js?ver=1486951446:57733) 在 ZoneDelegate.webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.bundle.js?ver=450735834:5799) 在 Zone.webpackJsonp../node_modules/zone.js/dist/zone.js.Zone.runTask (polyfills.bundle.js?ver=450735834:5567) 在 ZoneTask.webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [作为调用]

如何使按钮显示在对话框的右上角，而不是标题下方？我尝试将<h></h> 标签与按钮一起放在一个 div 中，以使它们与对话框的其余部分分开，但这也产生了一些控制台错误...

编辑

我也刚刚尝试在表格中显示对话框标题和关闭按钮，以查看布局是否正确：

<div class="provContactSelector" *ngIf="payer.showProvContactSelector">
    <table id="dialogTitle">
        <tr>
            <td>
                <h3>Provisional Contacts &amp; Managers</h3>
            </td>
            <td>
                <button class="icon icon-close-selected" (click)="toggleProvContactSelector(false)"></button>
            </td>
        </tr>
    </table>
    ...
</div>

但是这样做只会导致退出按钮再次显示在对话框标题下方...有人有什么想法吗？

编辑

所以，我按照@Jonathan Hamal 在评论中的建议做了，并将标题标签更改为：

<h3 style="display: inline-block">Provisional Contacts &amp; Managers</h3><button type="button" (click)="toggleProvContactSelector(grouopPayer)"><img src="c:\Users\...\icon-close.png"></button>

我现在可以看到图像显示在对话框中的正确位置（对话框标题旁边）。但是，图像似乎没有正确呈现 - 而不是显示的实际图像，它只是显示一个“.png”文件图标。

此外，当我单击联系人单元格中的“编辑”图标以打开对话框时，控制台显示错误：

错误类型错误：无法读取未定义的属性“showProvContactSelector” 在 Object.eval [as updateRenderer] (ProvisionalRemindersComponent.html:349)

showProvContactSelector 变量是 <div> 声明中的 ngIf 的变量，<h></h> 标记位于该声明中。

有人对如何解决这个问题有任何建议吗？

编辑

所以，我添加的图像无法正确显示的原因似乎是因为它位于项目目录之外（即使我已经指定了完整的文件路径）。我将其更改为使用项目目录中的图像文件：

<h3 style="display: inline-block">Provisional Contacts &amp; Managers <i class="icon icon-close-selected" (click)="toggleProvContactSelector(groupPayers.selectedPayer)"></i></h3>

现在可以看到正确显示的图像了。我还需要将style="display: inline-block" 属性添加到图像标记中，以使其与标题文本显示在同一行。

【问题讨论】：

• 表没有名为的子节点，而是，参考这里：w3schools.com/tags/tag_table.asp
• 很好地发现 - 打字时脑子放屁。已更正，但问题仍然存在...
• 除非您的表格元素有样式，否则它们应该并排放置。至于

  ，它是一个块元素，不允许按钮位于它旁边。使用h3 { display: inline-block } 作为您的第一个版本

• 我自己没有明确地向表格元素添加任何样式——尽管我不知道是否已经在其他地方全局设置了任何样式，因为我刚刚开始从事这个项目。我尝试将我的第一个版本的代码更改为<h3 { display: inline-block }>Provisional Contacts & Managers <button....></button></h3>，但这似乎并没有什么不同...
• display 属性是一种样式，如果应用内联，则必须使用<h3 style="display: inline-block">A</h3><button type="button">B</button> 应用。你可以去w3schools.com/html/html_styles.asp 了解有关 html 和 css 的介绍。另外，请确保 中的按钮不是 中的

  标记，而是紧随其后，因为 也是内联块元素。