<div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm">
    <h5 class="my-0 mr-md-auto font-weight-normal">Таблиця "Комп'ютер"</h5>
    <nav class="my-2 my-md-0 mr-md-3">
        <a (click)="add = true" class="btn btn-outline-primary mr-2" href="#">Добавити</a>
        <a (click)="pc.delete()" class="btn btn-outline-primary" href="#">Видалити все</a>
    </nav>
</div>
<select [(ngModel)]="OS" class="custom-select custom-select-lg mb-3">
    <option value="" selected>Оберіть ОС</option>
    <option value="Windows">Windows</option>
    <option value="Linux">Linux</option>
    <option value="MacOS">macOS</option>
    <option value="Ubuntu">Ubuntu</option>
</select>
<h3>{{OS}}</h3>
<table class="table table-striped table-bordered">
    <thead class="thead-dark">
        <tr *ngIf="add">
            <td><button (click)="create()" class="btn btn-outline-primary">+</button></td>
            <td><input class="form-control" [(ngModel)]="comp.videoCard" placeholder="Відеокарта" type="text"></td>
            <td><input class="form-control" [(ngModel)]="comp.CPU" placeholder="Центральний процесор" type="text"></td>
            <td><input class="form-control" [(ngModel)]="comp.motherboard" placeholder="Материнська плата" type="text"></td>
            <td><input class="form-control"  [(ngModel)]="comp.RAM" placeholder="ОЗУ" type="text"></td>
        </tr>
        <tr>
            <th scope="col">Відеокарта</th>
            <th scope="col">Центральний процесор</th>
            <th scope="col">Материнська плата</th>
            <th scope="col">ОЗУ (гб)</th>
            <th scope="col"></th>
        </tr>
    </thead>
    <tbody>
        <ng-container *ngFor="let item of pc.comp">
            <tr *ngIf="item.OS == OS">
                <td *ngFor="let prop of properties">
                    <input (blur)="pc.update(item._id)" [(ngModel)]="edit[prop]" type="text" [placeholder]="item[prop]" class="myform-control">
                </td>
                <td>
                    <svg (click)="pc.delete(item)" width="45px" class="bi bi-trash-fill btn btn-outline-primary" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1H2.5zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zM8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5zm3 .5a.5.5 0 0 0-1 0v7a.5.5 0 0 0 1 0v-7z"/>
                    </svg>
                </td>
            </tr>
        </ng-container>
    </tbody>
</table>
<button (click)="pc.update(pc)">tyest</button>