Question

我正在使用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错误错误：未捕获（承诺）：错误：加载大块公用失败。

错误：常见的加载块失败。       在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'文件图标。

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

错误TypeError：无法读取未定义的属性'showProvContactSelector' 在Object.eval [作为updateRenderer]（ProvisionalRemindersComponent.html：349）

showProvContactSelector变量是ngIf标签所在的<div>声明中赋予<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"属性，以使其显示在与标题文本相同的行上。

Answer 1

如评论中所述，我将发表评论作为可见性的答案。

根据您在代码中看到的内容，有几件事需要修复。

标题是块元素。因此，按钮不能漂浮在其旁边。请确保在标题上加上h3 {display: inline-block}。或使用表格，浮点数或flexbox布局。
您的图像URL当前是从磁盘而不是通过Web服务器提供的。在任何主机上进行部署之前，请确保托管文件并以静态方式提供文件。
至于您在payer对象上的错误，请确保将其正确分配给$ scope对象并正确引用。否则，请使用开发工具，这是您最好的朋友。

遍历w3schools以获取基本的html / css / js文档和AngularJs文档。您始终可以打开调试器控制台并查找错误。我发现直接在浏览器开发人员工具上使用样式也很有帮助。

欢呼

角度-如何在<h> </h>标签

1 个答案: