保存动态用户输入 - Angular

Question

This is more like a logical question because I'm not finding a correct approach for this query.

I have 2 auditoriums with x amount of seats in the below fashion.

<div>
        <pre>

        Auditorium 1:  A1 A2 A3 A4 A A6 A7 A8 A9
                       B1 B2 B3 B4 B5 B6 B7
                          C2 C3 C4 C5 C6 C7
        </pre>
</div>
<div>
        <pre>

        Auditorium 2:  A1 A2 A3 A4 A5 A6 A7
                          B2 B3 B4 B5 B6
                       C1 C2 C3 C4 C5 C6 C7 C8 C9
        </pre>
</div>

I have stored these seat numbers using 2 arrays, one for each auditorium. Now, if the auditorium owner decides to construct one more auditorium in his building, what would be an efficient way of asking the owner for his auditorium 3 seating arrangements dynamically, since they should be displayed in the above same way - seats one below another? and how would I dynamically store the seat numbers in an array at the same time?

Auditorium 3 example:
            

                A1 A2 A3 A4 A A6 A7
                B1 B2 B3 B4 B5 B6 B7 B8
                   C2 C3 C4 C5 C6 C7 C8 C9

Answer 1

You can get the data in the below format.,

 let Auditorium3 = [A1, A2, A3, A4, A5, A6, A7, X, X, B1, B2, B3, B4, B5, B6, B7, B8, X, X, C2, C3, C4, C5, C6, C7, C8, C9]

which you will show in the below format excluding 'X' in your logic and considering maximum of A1 to A9(fully occupied A row) similarly, B1 to B9(fully occupied B row), C1 to C9(fully occupied C row)

Auditorium 3 :
            
                A1 A2 A3 A4 A A6 A7
                B1 B2 B3 B4 B5 B6 B7 B8
                   C2 C3 C4 C5 C6 C7 C8 C9

Does this answer your question?