Как реализовать ngIf в td
У меня есть таблица, в которую я вставляю данные из БД, однако я хочу отредактировать те данные, которые квалифицированы на основе моей проверки, и поэтому должны быть 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 имеет тип date как 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)
@GabrielCostin *ngIf = "item.data >= today && item.data <= tomorrow"> попробуйте это
@GabrielCostin это не должно быть =>, должно быть <=
@NikhilRadadiya По-прежнему получаю ошибку синтаксического анализа шаблона, отредактирую свой пост и опубликую ошибку
Опубликовать точное сообщение об ошибке
@NikhilRadadiya Спасибо за помощь, причина в том, что я как-то набрал => вместо> = и потом не проверял: D
Ответы 3
Вам не нужны скобки интерполяции в angular-parts (например, ngIf).
<div *ngIf = "item.data >= today && item.data <= tomorrow"
И вы можете поместить * ngIf в td, как и в любой другой элемент (html, angular-component).
Во-первых, нет необходимости в привязке интерполяции в * ngIf. Внутри вы можете создать кнопку только с одним отключенным свойством. Нравиться
<td>
<button [disabled] = "item.editable"> Edit </button>
</td>
То же самое и для кнопки удаления.
Вы можете установить редактируемое и удаляемое свойство в компоненте, отметив нужные правила.
Думаю, это была бы простая и понятная реализация.
используйте *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>
Думаю, двойную фигурную скобку добавлять не нужно. проверяйте состояние без
{{}}.