How to push a new Item to an empty array?

I have an array of studets that I use by *ngFor,
The student list send bi the parent component,
when the studentList is empty, I want to see one row empty on the component,
This is the array:

*ngFor

@Input() studentList: Student = ; //child property


And In The parent cmp:

get studentList(): Student //parent property
const arr: Array<Student> = new Array<Student>();
if (getStudents())
arr=getStudents();

else
arr.push(new Student());
return (arr);




getStudents() is a Mock method that return null,
Student is a simple class with idNumber and studentName props
but if the arr is empty, the *ngFor does not show any row.

getStudents()

Student

idNumber

studentName

*ngFor

Student

getStudents()

*ngIf="studentList.length"

4 Answers
4

What you can do in this case is use

*ngIf=studentList.length === 0 use this condition for showing empty row

*ngIf=studentList.length === 0

*ngIf=studentList.length > 0 use this condition when data is available.

*ngIf=studentList.length > 0

<tr class="blank_row"> <td bgcolor="#FFFFFF" colspan="3">&nbsp;</td> </tr>

You can try this one:

get studentList(): Student
const arr: Array<Student> = ;
if (arr.length)
arr = getStudents();
else
arr = [new Student()];

return arr; // return it here.



Need to declare the Student as ;

get studentList(): Student //parent property
const arr: Student =
if (getStudents())
arr=getStudents();

else
arr.push(new Student());
return (arr);




you can do something like this in your html file

<table>
<thead>
------
</thead>
<tbody>
<tr *ngFor="student of students">
</tr>
<tr *ngIf="students.length==0">
</tr>
</tbody>
</table>


Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.