在 Angular 指令的 HTML 模板的表格单元格中的同一行上显示文本和按钮

Posted 2023-03-06

【中文标题】在 Angular 指令的 HTML 模板的表格单元格中的同一行上显示文本和按钮

【英文标题】：Display Text and Button on same line in table cell from HTML Template for Angular Directive

【发布时间】：2019-01-06 08:45:04

【问题描述】：

我目前实现了一个 Angular 搜索功能 here，它允许用户搜索课程。

这利用read-more directive 显示描述和关键字的预览，并允许用户切换以查看更多文本。我将see more 超链接转换为一个按钮，无论是按钮还是文本都出现在课程描述/关键字下方，我希望此切换显示在单词旁边而不是单独一行。

<div [innerhtml]="currentText"> </div>
<button (click)="toggleView()" class="btn btn-dark btn-sm"> 
    <i [class.hidden]="hideToggle" [ngClass]="isCollapsed ? 'fa fa-plus': 'fa fa-minus'"> </i></button>

我尝试过wrapping them in divs and using display:inline等解决方案

<div id="block_container">
    <div id="bloc1"> <div [innerHTML]="currentText"> </div> </div>
    <div id="bloc2">
     <button (click)="toggleView()" class="btn btn-dark btn-sm"> 
    <i [class.hidden]="hideToggle" [ngClass]="isCollapsed ? 'fa fa-plus': 'fa fa-minus'"> </i></button> </div>
</div> 

并尝试过display: inline-block 等，但无法弄清楚。

在表格单元格内或 Angular 模板的一部分中是否存在问题？任何指针将不胜感激！谢谢！

【问题讨论】：

对了你为什么用[innerHTML]用<div> currentText </div>

使用display: inline-block 到bloc1 和bloc2 不换行

我刚刚使用了给出的实现，使用字符串插值是否更干净？

或使用display:flex 到block_container

display:flex 将按钮切换一直发送到单元格的右上角，我希望它显示在 sn-p 预览的末尾旁边。而display: inline-block 似乎没有任何改变？

【参考方案1】：

如果您将inline 用于儿童#bloc1, #bloc2，请不要使用display:flex; 至#block_container。

#bloc1, #bloc2

    display:inline;

见代码：https://stackblitz.com/edit/angular-course-filter-pipe-vpax2x?file=src/app/app.component.css

【讨论】：

告诉我更多帮助！

我意识到我确实需要<div [innerHTML]="currentText"> </div> 而不是<div>currentText </div> 才能使高亮管道工作。在这种情况下，我将如何调整解决方案？谢谢！

【参考方案2】：

尝试用 1 行元素将它们包装在表格中

<table>
   <tr>
      <td><div1>...</div></td>
      <td><div2>...</div></td>
   </tr>
</table>