Different items loading on ng-select (multiple) angular

Question

I have a problem like this, I have a user Adam that have permission on 3 office A, B and C, then my web app has a share page that all users can edit and view those selected office on a ng-select. However, I encountered a problem in which a user named Eva only had permission to modify offices A and C. I tried to add an element called activeOffice to mark offices that are available for currentUser to pick, and I want the UI to show all offices are being selected on the ng-select, but if they want to modify it, they are only able to modify their permitted office (which mean dropdown only shown office A, C if currentUser is Eva).

my old ts code:

getAvailableOffices(officeId) {
        // remove any duplicates
        officeId = [...new Set(officeId)];
        // officesCurrent is all office that currentUser have permission 
        if (officeId === null || officeId.length === 0) {

            const availableOffices = this.officesCurrent.map(value => ({
                id: value.id,
                label: value.shortName,
            }));
            return availableOffices;
        }
        /**
        * Retrieves the available offices based on the provided office IDs.
        * If no office IDs are provided, all current offices are returned.
        * If office IDs are provided, the available offices are filtered based on the provided IDs.
       */
        if (Array.isArray(officeId) && this.officesCurrent.every(item => officeId.includes(item.id))) {
            this.officesAvailable = [...this.officesCurrent];
        } else {
            // listAllOffices is a list of all office from object get from api
            this.officesAvailable = [...this.officesCurrent, ...this.listAllOffices.filter(x => officeId.includes(x.id))];
        }

        const availableOffices = this.officesAvailable.map(value => ({
            id: value.id,
            label: value.shortName,
        }));

        return availableOffices;
    }

Html:

<ng-select [items]="item.activeOffice" class="custom" appendTo="body" [(ngModel)]="item.officeId"
[name]="'officeArr'+i" [multiple]="true" bindLabel="label" bindValue="id"
placeholder="Please Select Offices" (change)="valueChange($event)">
</ng-select>

I can not solve this problem for a month straight, much thanks.

I tried to modify as described above, I also simplify the problem by get all office info from API and re-valuate them under back-end when user hit save but my manager dont accept that solution. I currently using Angular v15.