angular-template

Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays

旧时模样 提交于 2019-11-26 08:19:59
问题 I looked at similar questions, but none of them helped me. I am going to receive an object like the following: [ { \"id\": 1, \"name\": \"Safa\", \"email\": \"neerupeeru@mail.ee\", \"purpose\": \"thesis\", \"programme\": \"Software Engineering\", \"year\": 2016, \"language\": \"Estonian\", \"comments\": \"In need of correcting a dangling participle.\", \"status\": \"RECEIVED\" }, { \"id\": 2, \"name\": \"Safa\", \"email\": \"neerupeeru@mail.ee\", \"purpose\": \"thesis\", \"programme\": \

Dynamic template reference variable inside ngFor (Angular 2)

孤人 提交于 2019-11-26 03:58:55
问题 How to declare a dynamic template reference variable inside a ngFor element? I want to use the popover component from ng-bootstrap, the popover code (with Html binding) is as shown: <ng-template #popContent>Hello, <b>{{name}}</b>!</ng-template> <button type=\"button\" class=\"btn btn-secondary\" [ngbPopover]=\"popContent\" popoverTitle=\"Fancy content\"> I\'ve got markup and bindings in my popover! </button> How can I wrap those elements inside ngFor ? <div *ngFor=\"let member of members\"> <

How to use *ngIf else?

流过昼夜 提交于 2019-11-26 01:50:43
问题 I\'m using Angular and I want to use *ngIf else (available since version 4) in this example: <div *ngIf=\"isValid\"> content here ... </div> <div *ngIf=\"!isValid\"> other content here... </div> How can I acheive the same behavior with ngIf else ? 回答1: Angular 4 and 5 : using else : <div *ngIf="isValid;else other_content"> content here ... </div> <ng-template #other_content>other content here...</ng-template> you can also use then else : <div *ngIf="isValid;then content else other_content"

What is the equivalent of ngShow and ngHide in Angular 2+?

那年仲夏 提交于 2019-11-26 00:17:34
问题 I have a number of elements that I want to be visible under certain conditions. In AngularJS I would write <div ng-show=\"myVar\">stuff</div> How can I do this in Angular 2+? 回答1: Just bind to the hidden property [hidden]="!myVar" See also https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden issues hidden has some issues though because it can conflict with CSS for the display property. See how some in Plunker example doesn't get hidden because it has a style :host

Angular: conditional class with *ngClass

≯℡__Kan透↙ 提交于 2019-11-25 23:45:33
问题 What is wrong with my Angular code? I am getting: Cannot read property \'remove\' of undefined at BrowserDomAdapter.removeClass ... HTML <ol class=\"breadcrumb\"> <li *ngClass=\"{active: step===\'step1\'}\" (click)=\"step=\'step1; \'\">Step1</li> <li *ngClass=\"{active: step===\'step2\'}\" (click)=\"step=\'step2\'\">Step2</li> <li *ngClass=\"{active: step===\'step3\'}\" (click)=\"step=\'step3\'\">Step3</li> </ol> 回答1: Angular 2,..,7 provides several ways to add classes conditionally: type one

Dynamic tabs with user-click chosen components

三世轮回 提交于 2019-11-25 21:34:41
问题 I\'m trying to setup a tab system that allows for components to register themselves (with a title). The first tab is like an inbox, there\'s plenty of actions/link items to choose from for the users, and each of these clicks should be able to instantiate a new component, on click. The actions / links comes in from JSON. The instantiated component will then register itself as a new tab. I\'m not sure if this is the \'best\' approach? So far, the only guides I\'ve seen are for static tabs,