ngfor

问题 I have a very simple class export class Foo { name: string; index: number; toFullString(): string { return `${this.name} | ${this.index}`; } } And this is my ngFor: <div *ngFor="let foo of foos"> {{foo.toFullString()}}; </div> And what I get is that method does not exist in the console: self.context.$implicit.toFullString is not a function I cannot figure out what's wrong in here. foo.name works fine and outputs all the elements. I suppose that the way typescript adds methods to an object

问题 How to target on the specif item under the nested loop <ul #parents *ngFor="let parent of parents"> <li #child *ngFor="let child of parents.childGroup"> {{child.name}} </li> <ul> Ts File Asper my code my target is parents[5].child[0] , but its working as child parents[0].child[0] @ViewChildren('parents') parents : QueryList<ElementRef> @ViewChildren('child') child: QueryList<ElementRef> this.parents.forEach((item, index) => { if (index === 5 ) { (this.child.find( (item , index) => index === 0

问题 1.Hello.There are a lot of answers how to show/hide element, attaching to each element of iterated array an property which we change on true/false. <button (click)="attachmentHide = !attachmentHide"></button> <itemComp [itemsArray]='item.children' class="col-sm-offset-1 subItemHiden" [class.subItemsShow] = 'showSubItem'></itemComp> so every time when we list each element of array it creates item.showSubItem property. In this case our array has been changed. But what to do if i want show/hide

问题 I would like to display an array using ngFor but before the first element I want to display a card (the user can click inside to show a modal) Here the code : <div fxFlex="25" *ngFor="let product of products; let i = index"> <div *ngIf="i == 0"> <mat-card (click)="addProduct()" class="mat-card-add-button"> <div fxLayout="row" fxLayoutAlign="center center" fxFlex="100%"> <span style="font-size:32px;text-align:center">+<br />Add product</span> </div> </mat-card> </div> <div fxLayoutAlign=

问题 I have a <button> in a ngFor loop and I want it to be disabled after the user clicks on the button. There is a button for each element of the loop so I have to differentiate them using a different boolean value for each of them. Here is a code snippet from the html: <div class="card" *ngFor="let i of items"> <button type="button" [disabled]="'btn' + i.id" (click)="btn + i.id=true">TEST</button> <div> The [disabled]="'btn' + i.id" part seems to work, but i cant set the value of it to true

问题 This question already has answers here : Can't bind to 'ng-forOf' since it isn't a known native property (11 answers) Closed 3 years ago . I'm trying to use *ngFor in my code. For some reason, I'm getting this error message when running the app: I've triple checked all property names are good, and there aren't any directives in this case. I configured the app with the angular.io quickstart instructions. This is my tsconfig: { "compilerOptions": { "target": "es5", "module": "commonjs",

问题 Yet very basic thing, but I am unable to figure out how to display array of strings in html template in angular2. .html <ul> <li *ngFor="#number of numberOptions"> {{number}} </li> </ul> .ts this.numberOptions= ["I", "II", "III", "IV", "V", "VI", "VII", "VIII", "IX", "X"]; The above trick is not working for me, text editor shows error for #number in ngFor . Is this deprecated in new versions? or am I doing anything wrong here? 回答1: You have to declare the variable number with let . <li *ngFor

问题 I use an array to store a list of group objects and an array of a list of light objects. I want to show the first group in the html and all connected lights to that group. After that the next group and the related lights and so on.... <div> <ul> <li *ngFor="let group of hueGroups"> {{group.name}} <li *ngFor="let light of hueLights; let i = index"> {{hueLights[group.lights[i]].name}} </li> </ul> </div> export class AppComponent implements OnInit { hueGroups:any[]; hueLights:any[]; constructor(

问题 I get a specific user from my dummy json file and looks like this: "id": "2", "name": "Marios Manolakeris", "skills": [ { "skill_1": "Machine Learning", "skill_2": "AI", "skill_3": "C++" } ] I need to iterate through skills, even if theoretically i don't know the key values skill_1, skill_2, skill_3. So, a solution is to do this: <div *ngFor="let skill of user.skills">{{skill.skill_1}}, {{skill.skill_2}}, {{skill.skill_3}}</div> but, I want to iterate through user.skills automatically. Is

问题 I am trying to display in HTML a list of data as follows: Home.ts : this.key = 0 objects = {} // The correct setting was objects = [] thanks! snapshot.forEach(doc => { this.objects[this.key] = { firstname: doc.id, lastname: doc.data().lastname, age: doc.data().age } this.key=this.key+1; } This results in the following when displayed in JSON: console.log(JSON.stringify(this.objects)); // RESULT OF THE CONSOLE: { "0": { "firstname":"james", "lastname":"bond", "age":"87" }, "1": { "firstname":