Question

我有一个表，从数据库中插入数据，但是，我想根据我的检查来编辑那些合格的数据，因此应该有2个按钮，其中1个用于删除，1个用于启用编辑。如果插入表中的行不合格，我想禁用这些按钮。什么是此方案的正确实施方式？

<tbody>
  <tr *ngFor="let item of reservations">
    <td>{{item.name}}</td>
    <td>{{item.email}}</td>
    <td>{{item.phone}}</td>
    <td>{{item.numberOfGuests}}</td>
    <td>{{item.timetables}}</td>
    <td>{{item.data}}</td>
    <td>
      <div *ngIf="{{item.data}} => today && {{item.data}} <= tomorrow"> <a>Ala bala</a></div>
    </td>
  </tr>
</tbody>

要说的几句话：item.data的日期类型为MM-dd-YYYY，今天也是今天的日期，明天也是明天的日期。

编辑：发布错误：

Uncaught Error: Template parse errors:
Parser Error: Bindings cannot contain assignments at column 12 in [item.data 
=> today && item.data <= tomorrow] in 
ng:///AppModule/ReservationtableComponent.html@72:33 ("             <td> 
{{item.data}}</td>
                      <td>
                        <div [ERROR ->]*ngIf="item.data => today && item.data 
<= tomorrow"> <a>Ala bala</a></div>
                      "): 
ng:///AppModule/ReservationtableComponent.html@72:33
at syntaxError (compiler.js:1016)
at 
TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler. 
 js.TemplateParser.parse (compiler.js:14813)
at 
JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler 
.js.JitCompiler. _parseTemplate (compiler.js:23992)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js. 
JitCompiler._compileTemplate (compiler.js:23979)
at compiler.js:23922
at Set.forEach (<anonymous>)
at 
JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler. 
js.JitCompiler._compileComponents (compiler.js:23922)
at compiler.js:23832
at Object.then (compiler.js:1007)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler. 
js.JitCompiler._compileModuleAndComponents (compiler.js:23831)

Answer 1

您不需要角部分的插值括号（例如ngIf）。

<div *ngIf="item.data >= today && item.data <= tomorrow"

您可以将* ngIf放入td以及任何其他元素（html，angular-component）中。

Answer 2

第一件事不需要在* ngIf中进行插值绑定。在内部，您可以创建一个仅具有一个禁用属性的按钮。喜欢

function disableselect(e) {
  return false
}

function reEnable() {
  return true
}

document.onselectstart = new Function ("return false")

if (window.sidebar) {
  document.onmousedown = disableselect
  document.onclick = reEnable
}

删除按钮也是如此。

您可以通过检查所需规则来在组件中设置可编辑和可删除属性。

我认为这将是一个简单明了的实现。

Answer 3

使用*ngIf="item.data >= today && item.data <= tomorrow"并从ngIf中删除{{ }}

<tbody>
  <tr *ngFor="let item of reservations">
    <td>{{item.name}}</td>
    <td>{{item.email}}</td>
    <td>{{item.phone}}</td>
    <td>{{item.numberOfGuests}}</td>
    <td>{{item.timetables}}</td>
    <td>{{item.data}}</td>
    <td>
      <div *ngIf="item.data >= today && item.data <= tomorrow"> 
          <a>Ala bala</a>
      </div>
    </td>
  </tr>
</tbody>

如何在TD中实现ngIf

3 个答案: