Question

我有两个数据库表，其中一个是父级，另一个是子级。父表具有对子表的引用。数据库表是使用代码优先方法生成的，数据模型如下：

[Table("Family")]
public partial class Family
{
    public int Id { get; set; }
    public string Surname { get; set; }
    public string FirstName { get; set; }
    public int RoleId { get; set; }
    public int FuId { get; set; }
    public int RiskAreaId { get; set; }
    public int LocationId { get; set; }
    public DateTime CreatedDate { get; set; }

    [ForeignKey("RoleId")]
    public virtual Role Role { get; set; }
    [ForeignKey("FuId")]
    public virtual FamilyUnit FamilyUnit { get; set; }
    [ForeignKey("RiskAreaId")]
    public virtual RiskArea RiskArea { get; set; }
    [ForeignKey("LocationId")]
    public virtual Location Location { get; set; }
}

以及下面的FamilyUnit表：

[Table("FamilyUnit")]
public partial class FamilyUnit
{       
    public int Id { get; set; }
    [Column(TypeName = "varchar")]
    [StringLength(50)]
    [Required]
    public string FamilyUnitName { get; set; }
    public virtual IEnumerable<Family> Families { get; set; }
}

然后我创建了一个webAPI项目，以便我的项目可以使用这些API。我的Api如下所示：

[EnableCors("*", "*", "*")]
public class FamilyUnitController : ApiController
{
    FamilyUnitBs familyUnitObjBs;

    public FamilyUnitController()
    {
        familyUnitObjBs = new FamilyUnitBs();
    }

    [ResponseType(typeof(IEnumerable<FamilyUnit>))]
    public IHttpActionResult Get()
    {
        var famUnits = familyUnitObjBs.GetALL();
        return Ok(famUnits);
    }

    [ResponseType(typeof(FamilyUnit))]
    public IHttpActionResult Get(int id)
    {
        FamilyUnit familyUnit = familyUnitObjBs.GetByID(id);
        if (familyUnit != null)
            return Ok(familyUnit);
        else
            return NotFound();
    }

    [ResponseType(typeof(FamilyUnit))]
    public IHttpActionResult Delete(int id)
    {
        FamilyUnit familyUnit = familyUnitObjBs.GetByID(id);
        if (familyUnit != null)
        {
            familyUnitObjBs.Delete(id);
            return Ok(familyUnit);
        }
        else
        {
            return NotFound();
        }
    }
}

然后我创建了另一个项目，该项目要求应用程序的前端使用API方法。

下面是带有工厂服务的angularjs控制器

appEIS.factory('familyMgmtService', function ($http,$rootScope) {
    famMgmtObj = {};

    famMgmtObj.getAll = function () {
        var Fams;        

        Fams = $http({ method: 'Get', url:$rootScope.ServiceUrl+ 'FamilyUnit' }).
        then(function (response) {            
            return response.data;
        });

        return Fams;
    };

    famMgmtObj.createFamily = function (fam) {
        var Fam;

        Fam = $http({ method: 'Post', url:$rootScope.ServiceUrl+ 'Family', data: fam }).
        then(function (response) {

            return response.data;

        }, function(error) {
            return error.data;
        });

        return Fam;
    };

    famMgmtObj.deleteFamilyById = function (eid) {
        var Fams;

        Fams = $http({ method: 'Delete', url:$rootScope.ServiceUrl+ 'FamilyUnit', params: { id: eid } }).
        then(function (response) {
            return response.data;

        });

        return Fams;
    };

    famMgmtObj.getFamilyByFuId = function (fid) {
        var Fams;
        console.log(fid);
        Fams = $http({ method: 'Get', url: $rootScope.ServiceUrl + 'Family', params: { id: fid } }).
        then(function (response) {            
            return response.data;
        });

        return Fams;
    };

    return famMgmtObj;
});

appEIS.controller('familyMgmtController', function ($scope, familyMgmtService, utilityService, $window) {

    $scope.Sort = function (col) {
        $scope.key = col;
        $scope.AscOrDesc = !$scope.AscOrDesc;
    };

    familyMgmtService.getAll().then(function (result) {
        $scope.Fams = result;
        console.log(result);
    });

    $scope.CreateFamily = function (Fam, IsValid) {
        if (IsValid) {
            $scope.Fam.Password = utilityService.randomPassword();

            familyMgmtService.createFamily(Fam).then(function (result) {
                if (result.ModelState == null) {
                    $scope.Msg = " You have successfully created " + result.FamilyId;
                    $scope.Flg = true;
                    utilityService.myAlert();

                    $scope.serverErrorMsgs = "";

                    familyMgmtService.getAll().then(function (result) {
                        $scope.Fams = result;
                    });
                }
                else {
                    $scope.serverErrorMsgs = result.ModelState;
                }
            });
        }
    };

    $scope.DeleteFamilyById = function (Fam) {
        if ($window.confirm("Do you want to delete Family with Id:" + Fam.FamilyId + "?")) {
            familyMgmtService.deleteFamilyById(Fam.FamilyId).then(function (result) {
                if (result.ModelState == null) {
                    $scope.Msg = " You have successfully deleted " + result.FamilyId;
                    $scope.Flg = true;
                    utilityService.myAlert();

                    familyMgmtService.getAll().then(function (result) {
                        $scope.Fams = result;
                    });
                }
                else {
                    $scope.serverErrorMsgs = result.ModelState;
                }
            });
        }
    };

    $scope.GetFamilyByFuId = function (Fam) {
        familyMgmtService.getFamilyByFuId(Fam.fid).then(function (result) {            
            console.log(result);
            $scope.Fams = result;

        });
    };


    $scope.CreateMultiFamily = function () {
        var file = $scope.myFile;
        var uploadUrl = "http://localhost:60736/api/Upload/";
        utilityService.uploadFile(file, uploadUrl, $scope.eid).then(function (result) {
            $scope.image = result;
        });
    };
});

家庭单元在手风琴列表中显示良好，但是使用familyUnit ID不能显示各个家庭，如下所示：

<div class="panel-body">
    <div dir-paginate="emp in Fams | filter:search | orderBy:key:AscOrDesc | itemsPerPage:10" class="wrapper center-block">
        <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
            <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="heading{{emp.Id}}">
                    <h4 class="panel-title">
                        <div role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse{{emp.Id}}" aria-expanded="true" aria-controls="collapse{{emp.Id}}">
                            {{emp.FamilyUnitName}}
                        </div>
                    </h4>
                </div>
                <div id="collapse{{emp.Id}}" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading{{emp.Id}}">
                    <div class="panel-body">
                        <div ng-repeat="f in emp.Families">{{f.FirstName}} - {{f.Surname}}</div>

                    </div>
                </div>
            </div>
        </div>
    </div>

Answer 1

根据评论中的讨论，此问题看起来像是数据问题，而不是前端问题。

在使用select patient_id , book_id , case when <boolean_condition> then 'some string here' when <another boolean condition> then 'other string here' else 'another string' end img_src from dual方法获取FamilyUnit时，您需要加载Families详细信息。有两种方法可以进行早期加载。

将Get(int id)与Include一起使用，例如：
```
Linq
```
第二个选项可能是通过从数据结构中删除var familyUnit = familyUnitObjBs.FamilyUnits .Include(fu => fu.Families) .Where (fu +. fu.Id == Id) .ToList();来进行早期加载，如果您打算添加更多方法或可能需要覆盖测试用例，则可能会出现问题，仍然看起来像：
```
virtual
```

您可以在以下位置找到有关延迟加载和早期加载的更多详细信息： https://msdn.microsoft.com/en-us/library/jj574232(v=vs.113).aspx

编辑： 1.您可以为familyUnit使用强类型而不是var：

[Table("FamilyUnit")]
public partial class FamilyUnit
{       
public int Id { get; set; }
[Column(TypeName = "varchar")]
[StringLength(50)]
[Required]
public string FamilyUnitName { get; set; }
public IEnumerable<Family> Families { get; set; }
}

如果需要整个列表，请获取列表而不是FirstOrDefault（）：

List<FamilityUnit> familyUnit= familyUnitObjBs.FamilyUnits 
                             .Include(fu => fu.Families)
                             .Where (fu +. fu.Id == Id)
                             .ToList();

如何从angularjs中的父元素获取子元素的值

1 个答案: